使用vue-html2pdf生成PDF时第10页后图片停止渲染问题求助

调试方向参考 #

• 开启html2canvas日志排查隐性报错
  给vue-html2pdf透传html2canvas: { logging: true }配置，重点查看生成到第10页对应DOM节点时的控制台输出，确认是否存在Canvas rendering context lost、纹理分配失败这类非Error级的警告日志，这类隐性异常不会触发堆内存溢出报错，但会导致画布后续内容绘制失败。
• 验证分页截断逻辑是否误伤图片节点
  vue-html2pdf默认的自动分页逻辑如果刚好截断在图片元素内部，对应版本的html2canvas会静默跳过该图片及后续同层级的所有图片绘制。你可以手动在每6件商品末尾插入<div style="page-break-after: always;"></div>强制分页，避免截断图片节点，测试是否还会出现10页后无图的问题。
• 调大html2pdf.js的资源队列阈值
  html2pdf.js内部默认的资源缓存和加载队列有隐性上限，哪怕图片已经预加载到应用层，也可能因为超过队列阈值被丢弃引用。你可以透传配置：imageTimeout: 0（取消图片加载超时限制），同时调大html2canvas.cacheSize参数到商品图片总数量的2倍以上验证。
• 测试分片生成逻辑
  不要一次性把所有商品DOM传入vue-html2pdf处理，改成每处理3-5页的商品内容，就手动追加到PDF实例中，避免单次处理的DOM和资源总数超过底层依赖的隐性上限。
• 跨浏览器验证环境限制
  不同浏览器对单画布的最大可用内存、单文档插入图片总数的限制不同，你可以在Firefox、Edge等非Chromium内核浏览器复现相同操作，如果停止渲染的页数出现明显变化，即可确认是浏览器侧的隐性资源限制导致，后续可考虑服务端生成方案。

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