无法在 pdf - html2pdf 中找到图像？答案

【问题标题】：Unable to find the Image in pdf - html2pdf?无法在 pdf - html2pdf 中找到图像？
【发布时间】：2022-11-08 17:55:35
【问题描述】：

我的图片标签：

<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back07.jpg"/>

还有我的 html2pdf 代码：

html2pdf(this.$refs.document, {
    margin: 0.2,
    filename: "invoice.pdf",
    pagebreak: {
        after: ".sautDePage"
    },
    image: {
        type: "jpeg",
        quality: 0.98,
    },
    html2canvas: {
        scale: 1,
    },
    jsPDF: {
        unit: "in",
        format: "letter",
        orientation: "portrait",
    },
});

请给我任何想法，因为现在我的图像没有显示在 pdf 中。它在页面上可见，但在 pdf 中不可见。

【问题讨论】：

我并不是真的喜欢 html2pdf，因此这是评论而不是答案，但根据您的图像 src，也许 CORS 是罪魁祸首？ github.com/eKoopmans/html2pdf.js/issues/105有解决方案
我试试这个，但没有任何其他建议....

标签： javascript vuejs3 jspdf html2canvas html2pdf

【解决方案1】：

您必须将图像的来源设置为 base64 编码字符串。

  async function convertToDataURL(source) {
    const blob = await fetch(source).then((result) => result.blob());
    const dataUrl = await new Promise((resolve) => {
      let reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.readAsDataURL(blob);
    });
    return dataUrl;
  }

将src 属性设置为上述函数的返回值。参数source 是您图片的网址。

【讨论】：