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

Question

我正在寻求将一些简单的HTML转换为PDF。似乎最简单的方法来保持css样式是使用“ html2canvas” js库将html转换为画布，然后使用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，假设您的图像在服务器中。

html2canvas(document.querySelector('#certificate')), {useCORS: true}).then(function(canvas) {
  let imgData = canvas.toDataURL('image/png');
  let img = new Image();
  img.src = imgData;
  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');
  };
});