将MathJax渲染为PDF [英] Render MathJax into PDF

问题描述

我已经花了几天时间来研究如何仅将开放源代码项目

I've spent days about how to render MathJax into PDF on client-side only (using several libraries like jsPDF, etc.) for the open source project Writing. I have tried many different options, without any success.

这是基于此答案的代码，它是我最近一次尝试中显示的问题.

Here is a code showing the problem in my latest attempt, based on this answer.

  MathJax.Hub.Config({ tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]} });

document.getElementById("getPdf").addEventListener("click", getPdf);

function getPdf() {
  var svg = document.getElementById('main').innerHTML;
  if (svg)
    svg = svg.replace(/\r?\n|\r/g, '').trim();

  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');

  context.clearRect(0, 0, canvas.width, canvas.height);
  canvg(canvas, svg);

  var imgData = canvas.toDataURL('image/png');

  var doc = new jsPDF('p', 'pt', 'a4');
  doc.addImage(imgData, 'PNG', 40, 40, 75, 75);
  doc.save('test.pdf');
}  

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>
<script src="https://cdn.rawgit.com/canvg/canvg/master/canvg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>

<p id="main">
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>

<button id="getPdf">Get PDF</button>

如何仅在客户端将HTML + MathJax内容呈现为PDF?

推荐答案

我的简短答案是:请勿这样做.

长的答案是您可以进行此工作，但结果不如提供打印样式表并使用户将输出另存为PDF.首先，您将创建一个包含单个(可能很大)PNG的PDF.那将是可怕的打印.

The long answer is you can make this work but the result will be inferior to providing a print stylesheet and letting users save the output as PDF. For starters, you will create a PDF with a single (potentially huge) PNG in it; that will be terrible for printing.

您的代码的主要问题是canvg只能处理SVG内容，而不能处理任意Web内容，因此您需要使用其他工具.

The main problem with your code is that canvg can only handle SVG content, not arbitrary web content, so you need to use another tool.

但是通常在画布元素中注入HTML内容存在局限性(

But generally there are limitations for injecting HTML content in canvas elements (for security reasons).

最后，您需要强制关闭MathJax的AssistiveMML扩展名，以避免重复的内容.

Finally, you will need to force MathJax's AssistiveMML extension to be off to avoid duplicate content.

下面是一个代码段，但出于上述安全原因，它在SO上失败；您可以在 codepen 上试用.

Below is a snippet but it fails on SO for the security reasons mentioned above; you can try it on codepen though.

MathJax.Hub.Queue(function (){
  var canvas = document.getElementById("canvas");
  var main = document.getElementById("main");
  rasterizeHTML.drawHTML(main.outerHTML,canvas);

})
document.getElementById("getPdf").addEventListener("click", getPdf);

function getPdf() {
  var imgData = canvas.toDataURL('image/png');

  var doc = new jsPDF('p', 'pt', 'a4');
  doc.addImage(imgData, 'PNG', 40, 40, 400, 200);
  doc.save('test.pdf');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
  "AssistiveMML": {
    disabled: true
  },
  SVG: {
    addMMLclasses: true,
    useGlobalCache: false
  },
  });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_SVG-full"></script>
<script   src="https://cdnjs.cloudflare.com/ajax/libs/rasterizehtml/1.2.4/rasterizeHTML.allinone.js"></script>
<p id="main">
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
<h1>As canvas</h1>
    <canvas id="canvas" width="400" height="200"></canvas>

<button id="getPdf">Get PDF</button>

这篇关于将MathJax渲染为PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！