如何在同一标签页打开打印弹窗打印Base64格式PDF？

你可以通过将Base64转换为Blob对象，再利用隐藏的iframe在当前页面加载PDF，最后触发打印的方式实现需求，全程不需要打开新标签页。具体步骤和代码如下：

核心实现思路 #

1. 剥离Base64字符串的前缀（如果有的话）：通常Base64格式的PDF会带有data:application/pdf;base64,前缀，需要先去除才能正确解码。
2. 将Base64解码为二进制数据，转换为Blob对象。
3. 创建一个隐藏的iframe嵌入当前页面，加载Blob生成的对象URL。
4. 监听iframe的加载完成事件，调用其内部的打印方法，触发当前标签页的打印对话框。
5. 打印完成后释放Blob URL，避免内存泄漏。

完整代码示例 #

// 假设你的Base64 PDF字符串
const base64Pdf = "data:application/pdf;base64,JVBERi0xLjMKJcfsj6IKNSAwIG9iago8PC9MZW5ndGggNiAwIFIvRmlsdGVyIC9GbGF0ZURlY29kZT4+CnN0cmVhbQp4nE2NuwoCQQxF+/mKx8tNcEUSMhBQnG7u5M...";

function printBase64Pdf(base64String) {
  // 1. 去除Base64前缀
  const base64Data = base64String.replace(/^data:application\/pdf;base64,/, "");
  
  // 2. 解码Base64并转换为Blob
  const binaryString = atob(base64Data);
  const uint8Array = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    uint8Array[i] = binaryString.charCodeAt(i);
  }
  const blob = new Blob([uint8Array], { type: "application/pdf" });
  
  // 3. 创建隐藏的iframe
  const iframe = document.createElement("iframe");
  iframe.style.display = "none";
  document.body.appendChild(iframe);
  
  // 4. 加载Blob并触发打印
  iframe.src = URL.createObjectURL(blob);
  iframe.onload = function() {
    // 触发打印对话框
    iframe.contentWindow.print();
    
    // 打印完成后释放URL对象，清理iframe
    setTimeout(() => {
      URL.revokeObjectURL(iframe.src);
      document.body.removeChild(iframe);
    }, 1000);
  };
}

// 注意：必须通过用户交互触发（比如点击按钮），否则浏览器可能阻止打印
document.getElementById("printBtn").addEventListener("click", () => {
  printBase64Pdf(base64Pdf);
});

关键注意事项 #

• 用户交互要求：现代浏览器会阻止非用户触发的自动打印行为，所以必须把打印逻辑绑定到用户操作（比如按钮点击）中，不能直接在页面加载时执行。
• 内存清理：记得调用URL.revokeObjectURL()释放Blob URL，避免内存泄漏；打印完成后可以移除创建的iframe。
• 兼容性：主流浏览器（Chrome、Firefox、Edge）都支持这种方式，IE浏览器可能需要额外处理（但现在IE基本已被淘汰）。

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