如何在新浏览器标签页打开PDF并自动唤起打印对话框？

开发者阿泽

2026-7-13

在新标签页打开文件并自动唤起打印对话框的实现方案

一、处理Blob文件的场景

针对你现有从后端获取Blob文件的代码，修改为在新标签页打开并自动打印的逻辑如下：

// 假设已获取到后端返回的response.body数据
var blob = new Blob([response.body], {type: 'application/pdf'});
const blobUrl = URL.createObjectURL(blob);

// 创建新标签页并加载Blob文件
const printWindow = window.open(blobUrl, '_blank');

// 监听新窗口加载完成后触发打印
printWindow.onload = function() {
  printWindow.print();
  // 打印完成后释放Blob URL资源（避免内存泄漏）
  setTimeout(() => {
    URL.revokeObjectURL(blobUrl);
  }, 1000);
};

注意事项：

必须确保代码在**用户交互事件（如按钮点击）**中执行，否则浏览器可能拦截弹出窗口
部分浏览器对PDF的onload触发时机有差异，若打印时机不准，可适当延迟调用print()

二、处理表单提交获取服务器文件的场景

这种场景需要根据后端返回的文件类型做不同处理：

子场景1：后端返回HTML文件

如果可以修改后端返回内容，直接在返回的HTML末尾添加自动打印脚本：

<script>
  window.onload = function() {
    window.print();
  };
</script>

若无法修改后端，且新窗口页面与当前页面同域，可通过前端监听新窗口加载事件实现：

var form = document.createElement("form");
form.target = "_blank";
form.method = method;
form.action = url;
form.style.display = "none";
document.body.appendChild(form);

// 提前创建新窗口并保存引用
const printWindow = window.open('', '_blank');
form.submit();

// 监听新窗口加载完成触发打印（仅同域有效）
printWindow.onload = function() {
  printWindow.print();
};