链接中的图像未显示在 html2pdf 中

Question

我正在尝试使用我使用 npm 安装的html2pdf在 javascript 中生成 pdf 。问题是它不会显示来自 pdf 中的 url 的图像。这是我的代码：

这是一个显示问题的沙箱： https://codesandbox.io/s/html2pdf-not-loading-image-gvmx0u

正如您所看到的，当您单击“导出为 pdf”时，内容变量中硬编码的图像没有进入文件。

结果是一个带有空格而不是图像的 pdf 文件。有谁知道如何将我的图片转为pdf文件？js 中有没有更好的库可以从 html 构建 pdf ？

Answer 1

我通过放置解决了这个问题

useCORS: true

  exportToPDF() {
        var opt = {
            margin: 0,
            filename: 'time_sheet_report.pdf',
            image: { type: 'jpeg', quality: 0.20 },
            html2canvas: { scale: 2,useCORS: true },
            jsPDF: { unit: 'in', format: 'a4', orientation: 'p' }
        };

        html2pdf().set(opt).from(this.$refs.document).save();
}

Answer 2

对于那些想知道的人，我通过将图像转换为 Base64 并使用 Promise 将其放入 html2pdf 的 html 内容中解决了问题。

整个答案可以在原始问题的沙箱中找到： https://codesandbox.io/s/html2pdf-not-loading-image-gvmx0u

以下是有帮助的来源（以及 @KJ 在评论中告诉我的内容）：

如何将图像转换为base64：/sf/answers/1419953741/

如何等待 xmlhhtprequest：在 JavaScript 中，我/应该如何将 async/await 与 XMLHttpRequest 一起使用？

再次感谢KJ的帮助！