无法使用pdfmake显示pdf文档中的本地图像

Question

我正在尝试向 pdfMake 生成的 pdf 文档添加徽标。这是我的代码：

import {Injectable} from '@angular/core';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;

@Injectable({
  providedIn: 'root'
})
export class PdfService {

  constructor() { }

  getDocumentDefinition(id: number, companyName, productName) {
    // productEvalDate: Date
    // getDocumentDefinition(id: number, productName: string, companyName) {

    return {
      content: [{
        image: '.assets/images/GPBC-logo-2019.jpg',
        width: 150,
        text: 'The product, listed below, produced for the company listed below, is PLANT-BASED certified ' +
          'under XXX Certification.\n \n' +
          'Name of Product: ' + productName +
          '\n Name of Producer/Owner: ' + companyName +
          '\n Product ID#: ' + id +
          '\n \n \n Signed by: XXX '
        // '\n \n \n This certificate is valid until: ' + productEvalDate
        ,
        fontSize: 20
      },
        {


        }]
    };
  }
}

我得到的结果是一切都显示正确；文本和动态数据。但没有图像显示，也没有错误。

自从做了更多研究后，我将代码更改如下：

import {Injectable} from '@angular/core';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;

@Injectable({
  providedIn: 'root'
})
export class PdfService {

  constructor() { }

  getDocumentDefinition(id: number, companyName, productName) {
    // productEvalDate: Date
    // getDocumentDefinition(id: number, productName: string, companyName) {

    return {
      content: [
'The product, listed below, produced for the company listed below, is PLANT-BASED certified ' +
          'under XXX Certification.\n \n' +
          'Name of Product: ' + productName +
          '\n Name of Producer/Owner: ' + companyName +
          '\n Product ID#: ' + id +
          '\n \n \n Signed by: XXX '
        // '\n \n \n This certificate is valid until: ' + productEvalDate
        {
         image: './assets/images/GPBC-logo-2019.jpg',
        width: 150
,
        fontSize: 20
      },
        {


        }]
    };
  }
}

我收到如下错误消息：无效图像：在虚拟文件系统中找不到文件图像字典应包含 dataURL 条目（或 node.js 中的本地文件路径）。我相信我需要将图像转换为 base64，但我并没有真正看到如何执行此操作的明确说明。任何帮助将不胜感激

Answer 1

这将帮助您从本地资源文件中获取图像。添加

async

和

await

进行转换非常重要。

getBase64ImageFromURL(url: string) {
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"
      )
      }
    ]
  }

pdfMake.createPdf(docDefinition).download();

}

Answer 2

我相信图像需要转换为

base64

才能使用， 来源

将图像转换为 base64

Answer 3

您不必转换为 base64。如果将文件系统中的本地 JPG 和 PNG 放入 pdfmake 根目录的 ./images 文件夹中，则可以包含它们。然后它们将被引用为“./images/filename.jpg”（或 .png，视情况而定）。这是来自 PDF Make 开发游乐场。如果您不使用开发游乐场，那么路径将会不同，但您至少可以看到它如何使用开发游乐场作为模板来处理本地 JPG 和 PNG。