jsPDF：使用新的.html（）方法时未加载html2canvas

Question

我想使用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”

我正在将vuejs与webpack一起使用。

在同一页面中，我当前正在使用带有以下代码的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什么意思 我该怎么做才能加载它？

Answer 1

jsPDF需要在全局范围内声明html2canvas才能工作，因此您必须编写

window.html2canvas = html2canvas;

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

就是说，我也无法使其正常工作，所以我求助于一个可解决该问题的包装器，方法是手动调用，html2canvas()然后将生成的画布提供给jsPDF。

Answer 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 实际上是文本而不是图像。

代码示例