在 pdfmake 中使用 dataUrl 时出现无效图像错误

Question

我正在使用 pdfmake 在 Angular 应用程序中生成 PDF 文档，并且只是尝试使用 dataURL 将图像添加到输出（遵循 pdfmake 文档。

        var docDefinition = {
          content: [
            {
              table: {
                widths: ['*'],
                body: [
                  [{text: 'Table text goes here', style: 'tableCellPadded'}]
                ]
              },
            },
            {
              image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACHCAYAAADqQ...AABJRU5ErkJggg==",
              width: 152
            }
            '...various other text lines go here...'
          ],
          styles: {
            header: {
              bold: true,
              fontSize: 14
            },
            tableCellPadded: {
              margin: [0, 15, 0, 15],
              bold: true,
              fontSize: 14
            },
            note: {
              fontSize: 16,
              bold: true,
              italics: true
            }
          }
        };

但是，当我尝试打印文档时，我在控制台中收到此错误：

无效图像，图像字典应包含 dataURL 条目（或 Node.js 中的本地文件路径）

据我所知，我已在文档定义对象中正确输入了该项目，并且我的 dataURL 有效（我已在浏览器中对其进行了测试）。我还有什么遗漏的吗？

谢谢。

Answer 1

你可以这样尝试。它会工作得很好。别忘了投票

getBase64ImageFromURL(url) {
  return new Promise((resolve, reject) => {
    var img = new Image();
    img.setAttribute("crossOrigin", "anonymous");

    img.onload = () => {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;

      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);

      var dataURL = canvas.toDataURL("image/png");

      resolve(dataURL);
    };

    img.onerror = error => {
      reject(error);
    };

    img.src = url;
  });
}

async createPdf() {
  var docDefinition = {
    content: [
      {
        image: await this.getBase64ImageFromURL("../../assets/ribbonLogo1.png")
       },

Answer 2

好的，我将此归因于 ID-10-T 错误。我的带有 base64 编码 URL 的线路工作正常。我在文档定义对象中发现了另一行，其中我没有正确引用图像，并且抛出了错误。

Answer 3

我在 React 环境中注意到了这个错误。

问题似乎是传递给 createPdf 的参数对象的突变。

我通过确保传递到 createPdf 的内容是“干净的”并且不再引用传入的数据来修复它。这是我的代码：

      useEffect(() => {

        const iframe = iframeRef.current;
            
        pdfMake
        .createPdf({
            content: JSON.parse(JSON.stringify(content))
        })
        .getBase64((encodedString) => {
            iframeRef.current.src = `data:application/pdf;base64,${encodedString}`;
        })

        return () => iframe.src = 'about:blank';

      }, [content]);

Answer 4

pdfMake 仅适用于 .jpeg / .jpg / .png 文件 让我们使用您使用过的图像文件就在其中。

非常重要