javascript - 将 MathJax 渲染成 PDF

Question

我花了几天时间研究如何仅在客户端将 MathJax 呈现为 PDF(使用几个库，如 jsPDF 等)，用于开源项目 Writing .我尝试了很多不同的选择，但都没有成功。

这是显示我最近一次尝试中的问题的代码，基于 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？

Answer 1

我的简短回答是:不要这样做。

长的答案是你可以做到这一点，但结果将不如提供打印样式表并让用户将输出保存为 PDF。对于初学者，您将创建一个包含单个(可能很大)PNG 的 PDF；这对打印来说会很糟糕。

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

但通常在 Canvas 元素中注入(inject) HTML 内容存在限制 (for security reasons)。

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

下面是一个片段，但出于上述安全原因，它在 SO 上失败了；你可以试试codepen虽然。

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>