来自链接的图像未显示在 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：https://stackoverflow.com/a/20285053/5065874

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

再次感谢KJ的帮助！

Answer 3

我刚刚用第三种方法克服了这个问题。 Zarcoin 的 base64 方法虽然对我有用，但会导致浏览器出现大图像（Edge）内存不足问题。

在这种情况下，将图像转换为 blob URL 是有效的。下面是我的实现，我需要将图像 URL 数组转换为 blobURL

const processImages = async (imagesArray) => {
  if (!imagesArray || imagesArray.length === 0) return;
  for (let i = 0; i < imagesArray.length; i++) {
    const imgURL = imagesArray[i].image;
    const image = await fetch(imgURL);
    const imageBlob = await image.blob();
    const blobUrl = URL.createObjectURL(imageBlob);
    imagesArray[i].image = blobUrl;
  }
};