jsPDF：使用新的 .html() 方法时未加载 html2canvas答案

【问题标题】：jsPDF: html2canvas not loaded while using new .html() methodjsPDF：使用新的 .html() 方法时未加载 html2canvas
【发布时间】：2019-06-05 05:18:39
【问题描述】：

我想使用jsPDF.html 将html页面转换为pdf，我正在使用这个代码：

savePdf () {
  var pdf = new jsPDF({unit: 'mm', format: 'a4', orientation: 'portrait' })
  pdf.html(document.getElementById('printable-cv'), {
    callback: function (pdf) {
      pdf.save('cv-a4.pdf');
    }
  })
}

但我收到错误html2canvas not loaded：是我忘记了吗？我确实有 html2canvas

"html2canvas": "^1.0.0-alpha.12"

我正在使用带有 webpack 的 vuejs。

在同一页面中，我目前正在使用 html2pdf 和以下代码：

savePdf0 () {
  let opt = {
    filename: 'cv.pdf',
    enableLinks: true,
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: {
      scale: 8,
      useCORS: true,
      width: 310,
      letterRendering: true,
    },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
  }
  html2pdf().set(opt).from(document.getElementById('printable-cv')).save()
}

正确找到 html2canvas。

html2canvas not loaded 的真正含义是什么？我该怎么做才能加载它？

【问题讨论】：

我添加了一个显示问题的代码框：codesandbox.io/s/6vmqpwy0xr

标签： jspdf html2canvas

【解决方案1】：

jsPDF需要在全局范围内声明html2canvas才能工作，所以你必须写

window.html2canvas = html2canvas;

在你打电话给html()之前的某个地方。

也就是说，我也无法让它工作，所以我求助于 a wrapper，通过手动调用 html2canvas() 然后将生成的画布提供给 jsPDF 来解决这个问题。

【讨论】：

你成就了我的一周！！！ :D 谢谢你/男人！但现在我无法为 a4 尺寸设置合适的尺寸。它要么很小，要么很大:(有什么线索吗？
谢谢。在我的反应应用上工作

【解决方案2】：

在ptidus 之前的分析器之后，这应该可以工作：

saveAsPdf() {
  window.html2canvas = html2canvas;
  var doc = new jsPDF(
    'p', 'pt', 'a4'
  );
  doc.html(document.querySelector("body"), {
    callback: function(pdf) {
      pdf.save("cv-a4.pdf");
    }
  });
}

边距可能有一些问题，但我没有探索太多。您还会注意到生成的 PDF 实际上是文本而不是图像。

code example

【讨论】：

如果使用 TypeScript，它不会对 window.html2canvas 感到满意，所以只需做一个丑陋的 window["html2canvas"] = html2canvas。

【解决方案3】：

对于所有使用webpack 的人，我所做的是将html2canvas 添加到ProvidePlugin。 You can read about this here

// webpack configuration
plugins: [
    new webpack.ProvidePlugin({
        html2canvas: 'html2canvas'
    });
]

【讨论】：

这是工作加上正确标记的答案，而我确实使用 webpack

【解决方案4】：

以下两个解决了这个问题：

// webpack 配置插件：[ 新的 webpack.ProvidePlugin({ html2canvas: 'html2canvas' }); ]
窗口["html2canvas"] = html2canvas;

即使没有第一步它的工作。

【讨论】：