html2canvas/jsPDF - 当将HTML转换为PDF时，图片无法显示

Question

我想将一些简单的HTML转换成PDF。似乎最简单的方法是使用“html2canvas”js库先将HTML转换为画布，然后使用jsPDF创建PDF，以保留css样式。

我遇到的问题是，在我的HTML中有背景图片和内联图片，但在转换后的PDF中都没有显示出来。我在这里创建了一个Codepen：https://codepen.io/adamboother/pen/NWGeqom

这是我的JS执行转换：

function convertToPdf()
{
    html2canvas(document.querySelector('#certificate')).then(canvas => {
        let pdf = new jsPDF('landscape', 'mm', 'a4');

        pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pdf.internal.pageSize.width, pdf.internal.pageSize.height);

        pdf.save('certificate.pdf');
    });
}

有人找到解决这个问题的方法了吗？

- adamb

Answer 1

我正在使用您的代码中的 useCORS: true ，如果您需要在服务器上加载图像，则它可以正常工作。此外，您可以按照以下代码进行操作：

function convertToPdf()
{ 
    html2canvas(document.querySelector('#certificate'), {useCORS: true}).then(function(canvas) {
      let img = new Image();
      img.src = canvas.toDataURL('image/png');
      img.onload = function () {
        let pdf = new jsPDF('landscape', 'mm', 'a4');
        pdf.addImage(img, 0, 0, pdf.internal.pageSize.width, pdf.internal.pageSize.height);
        pdf.save('certificate.pdf');
      };
    });
}

- Shoma

Answer 2

是的，@shoma的答案对我有用。这是我的代码HTML和图像绑定到PDF

pdf.html(htmlContent, {
  html2canvas: { scale: 0.8 },
  pagesplit: true,
  callback: () => {
    html2canvas(SELECTOR_HERE, {
      useCORS: true
    }).then((canvas) => {
      const img = new Image();
      img.src = canvas.toDataURL('image/png');
      img.onload = () => {
        pdf.addImage(img, 0, 0, pdf.internal.pageSize.width, 200);
        pdf.save(`download-${genarateFileName}.pdf`);
      };
    });
  }

- Chathuranga CPM

---

你做得很好，继续保持。 - Manoj Pilania

这并不是对问题的回答，而是对Shoma的回答的回应。请仅使用回答功能来回答问题。 - Tijmen