jsPDF调用output('dataurlnewwindow')添加超3张300KB图片时预览失效

• doc.output('dataurlnewwindow')的底层逻辑是将整个PDF文件转成base64编码的data URL，直接作为新标签页的地址传入，让浏览器直接解析地址栏里的data数据渲染PDF。
• 所有主流浏览器对地址栏的URL长度都存在硬限制：Chrome/Edge系列的阈值约为2MB，Firefox约为6MB，超过长度后浏览器会静默截断URL内容，不会抛出可捕获的JS错误，最终新标签页拿到的是残缺的PDF数据，就会出现一直加载、页面空白的现象。
• base64编码本身会让文件体积膨胀约33%，4张单张300-400KB的图片加上PDF的结构、文字等内容，编码后的总长度很容易就触碰到Chrome的2MB阈值，这也是3张图正常、4张图异常的直接原因。
• doc.save()能正常工作是因为该方法走的是二进制Blob流+浏览器下载接口，完全不依赖URL传数据，不受URL长度限制，和文件大小无关。

• 这个问题不是jsPDF设置的预览大小限制，限制来自浏览器本身的底层规则。
• 触发问题和图片数量没有直接关系，本质是转码后的data URL总长度超过了浏览器阈值，哪怕是单张大图，只要转码后长度超限也会出现同样问题。

• 优先替换为Blob URL预览方案，这是最通用无副作用的解法：放弃使用dataurlnewwindow参数，直接将PDF输出为二进制Blob对象，通过URL.createObjectURL()生成临时内存地址再打开，这种方式完全没有长度限制，几十MB的PDF也能正常加载。参考实现如下：

preview () { 
  try {
    // 输出PDF为二进制Blob
    const pdfBlob = this.doc.output('blob');
    // 生成临时Blob访问地址
    const previewUrl = URL.createObjectURL(pdfBlob);
    // 新标签页打开预览
    window.open(previewUrl);
    // 预览页关闭后可调用URL.revokeObjectURL(previewUrl)释放内存，避免内存泄漏
  }
  catch(error){
     console.log(error);
  }
}

• 如果因场景限制必须使用data URL方案，可提前优化插入PDF的图片：将JPEG压缩质量调整到0.6-0.8区间，图片分辨率控制在150DPI以内（屏幕显示足够清晰），降低PDF整体体积，让转码后的data URL长度落在浏览器限制范围内。
• 若需要兼容不支持Blob URL的老旧浏览器，可在当前页面内插入全屏iframe，直接将Blob对象注入iframe渲染，避免走新标签页地址栏加载的逻辑。

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