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

Question

我希望将一些简单的 HTML 转换为 PDF。执行此操作并保持 css 样式的最简单方法似乎是首先使用“html2canvas”js 库将 html 转换为 Canvas ，然后使用 jsPDF 创建 PDF。

我遇到的问题是，我的 HTML 中同时包含背景图片和内联图片，但转换后均未显示在 PDF 中。我在这里创建了一个代码笔: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');
      };
    });
}