jsPDF中doc.save()正常但doc.output()图片显示异常求助

一、两者的核心输出差异 #

• 编码与处理方式不同：
  • doc.save()内部会自动将PDF的二进制内容编码为Base64格式，再触发浏览器的下载流程，这个过程中浏览器会妥善处理二进制数据的编码解码，保证图片等资源完整无损。
  • 无参数的doc.output()默认返回原始二进制字符串，包含大量非可打印字符，跨系统传递时极易出现编码丢失、乱码，导致图片数据损坏。

二、解决doc.output()生成内容的图片显示问题 #

要让外部系统正常解析图片，关键是让output()输出和save()一致的Base64编码内容：

1. 指定output的输出格式为Base64
   修改代码，显式指定输出格式：

   doc.addImage(this.image, 'JPEG', 75, 15, 57, 23);
   doc.text(20, 100, 'Subject : Notification');
   // 输出纯Base64编码的PDF内容
   this.GenPDF = doc.output('base64');
   

   如果外部系统需要带Data URI前缀的格式（比如data:application/pdf;base64,...），则使用：

   this.GenPDF = doc.output('datauristring');
   

2. 外部系统正确解码Base64
   外部系统接收到Base64字符串后，需要将其解码为二进制数据再生成PDF文件。以Node.js后端为例：

   const fs = require('fs');
   // 假设接收的Base64字符串为genPDFContent
   const pdfBuffer = Buffer.from(genPDFContent, 'base64');
   fs.writeFileSync('final.pdf', pdfBuffer);
   

3. 确认图片输入的有效性
   确保this.image是jsPDF支持的格式：Base64字符串、Canvas元素或已加载完成的Image对象，避免因图片源本身的编码问题导致最终PDF异常。

内容的提问来源于stack exchange，提问作者B K