为什么使用jsPdf的output方法时会出现空白页？

我之前也碰到过类似的情况——明明data URL是正确的，用这个函数打开就是空白页，但复制URL到新标签页却能正常显示。不想用iframe的话，试试这几个靠谱的方案：

• 手动创建新窗口并控制加载时机
  有时候output(dataurlnewwindow)的加载逻辑不够严谨，浏览器窗口还没初始化完成就注入内容，导致PDF渲染失败。可以手动把控这个过程：

  // 替换成你的有效PDF data URL
  const validPdfDataUrl = "data:application/pdf;base64,你的base64内容...";
  // 打开空白新窗口
  const pdfWindow = window.open("", "_blank");
  // 等窗口加载完成后再写入PDF内容
  pdfWindow.onload = function() {
    pdfWindow.document.write(`<embed src="${validPdfDataUrl}" type="application/pdf" style="width:100%;height:100vh;">`);
    pdfWindow.document.close();
  };
  

  这种方式能确保窗口完全就绪后再加载PDF，大概率能解决空白问题。

• 改用Blob + Object URL替代data URL
  如果你的PDF文件较大，超长的data URL可能会触发浏览器的处理限制，换成Object URL会更稳定：

  // 假设你已有PDF的base64字符串
  const pdfBase64Str = "你的PDF base64内容";
  // 将base64转换为二进制Blob
  const byteStr = atob(pdfBase64Str);
  const uint8Array = new Uint8Array(byteStr.length);
  for (let i = 0; i < byteStr.length; i++) {
    uint8Array[i] = byteStr.charCodeAt(i);
  }
  const pdfBlob = new Blob([uint8Array], { type: "application/pdf" });
  // 创建浏览器临时Object URL
  const pdfObjectUrl = URL.createObjectURL(pdfBlob);
  
  // 打开新窗口显示PDF
  const newWindow = window.open(pdfObjectUrl, "_blank");
  // 窗口关闭时释放URL，避免内存泄漏
  newWindow.onbeforeunload = () => URL.revokeObjectURL(pdfObjectUrl);
  

  Object URL是浏览器生成的临时链接，比超长的data URL更易处理，兼容性也更好。

• 检查data URL的格式完整性
  先确认你的data URL格式完全正确：必须以data:application/pdf;base64,开头，后面紧跟完整的base64编码内容，没有多余的空格、转义字符或者截断。可以把data URL打印到控制台，复制出来单独验证，确保没有格式错误。

• 排查浏览器端设置
  虽然这不是代码层面的解决方案，但可以建议用户检查：浏览器是否启用了内置PDF查看器，有没有设置成默认下载PDF而不是在线预览，这些设置也可能导致新窗口显示空白。

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