html2canvas/jsPDF - 将 html 转换为 pdf 时不显示图像

Question

我正在寻找将一些简单的 HTML 转换为 PDF 的方法。似乎最简单的方法是使用“html2canvas”js 库首先将 html 转换为 canvas，然后使用 jsPDF 创建 PDF。

我遇到的问题是，我的 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');
    });
}

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

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');
      };
    });
}