jsPDF基于HTML生成含图片的PDF时出现文件体积过大问题

核心原因 #

1. 你调用的doc.html()方法依赖html2canvas实现渲染，当HTML中包含图片、渐变、复杂CSS样式时，html2canvas会将整页内容统一栅格化为canvas位图再嵌入PDF，不会直接复用你原本的PNG资源。相当于哪怕你只加了一张32KB的小图，整页的文字、样式都会和图片一起被转成一张大的低压缩PNG，自然会导致体积飙升。这也是你移除所有图片后体积降到200KB的核心原因——纯文本简单样式场景下jsPDF会优先用矢量方式渲染，不会生成整页位图。
2. jsPDF的compress: true参数仅对PDF的文档结构元数据做压缩，对嵌入的位图资源压缩效率极低，无法抵消整页位图带来的体积增量。
3. 调整单位仅改变PDF的排版逻辑，不会改变html2canvas渲染生成的位图像素总量，所以体积不会出现明显变化。

优化方案 #

• 优先选择手动绘制的方案：放弃doc.html()自动渲染逻辑，单独提取HTML中的文本、样式、图片资源，用jsPDF原生API分别绘制：文本、线条、色块用矢量API绘制，原始PNG资源直接用doc.addImage()方法插入，避免生成整页位图，优化后体积可以达到Puppeteer生成的300KB水平。如果有重复使用的图片，给addImage()设置相同的别名参数，同一张图只会嵌入一次，多次复用不会增加体积。
• 若必须使用doc.html()自动渲染，调整html2canvas参数降低位图体积：
  • 进一步降低scale参数到0.15~0.2区间，只要能满足清晰度要求即可，scale直接决定生成位图的像素总量，是最有效的优化参数
  • 不需要透明通道的场景下，可先手动调用html2canvas渲染得到canvas对象，将canvas导出为高压缩比的JPEG格式，再调用addImage()插入PDF，比默认导出的PNG体积小60%以上
  • 给html2canvas添加useCORS: true、imageTimeout: 0参数，避免图片渲染异常导致的冗余数据生成

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