如何使用javascript或jquery实现一键打开多个PDF的单独打印预览

实现思路 #

通过按钮点击事件遍历所有PDF路径，为每个PDF打开独立的新窗口，待PDF资源加载完成后自动触发浏览器打印预览逻辑。

原生JavaScript实现 #

HTML代码 #

<button id="batchPrintBtn">批量打印预览PDF</button>

JS代码 #

// 替换为实际的PDF文件路径集合
const pdfFiles = [
  "./doc1.pdf",
  "./doc2.pdf",
  "./doc3.pdf"
];

document.getElementById("batchPrintBtn").addEventListener("click", () => {
  pdfFiles.forEach(pdfUrl => {
    // 为每个PDF打开独立新窗口
    const printWin = window.open(pdfUrl, "_blank");
    // 资源加载完成后自动触发打印预览
    printWin.addEventListener("load", () => {
      printWin.print();
    });
  });
});

jQuery实现 #

HTML代码 #

<button id="batchPrintBtn">批量打印预览PDF</button>

JS代码 #

// 替换为实际的PDF文件路径集合
const pdfFiles = [
  "./doc1.pdf",
  "./doc2.pdf",
  "./doc3.pdf"
];

$("#batchPrintBtn").on("click", function() {
  $.each(pdfFiles, function(_, pdfUrl) {
    const printWin = window.open(pdfUrl, "_blank");
    $(printWin).on("load", function() {
      this.print();
    });
  });
});

注意事项 #

• 必须允许当前站点的弹窗权限，否则浏览器会默认拦截批量打开的新窗口，导致功能失效
• 部分浏览器自带的PDF预览插件可能会屏蔽自动触发的print()方法，遇到这种情况可以手动点击新窗口的打印按钮触发预览
• 所有PDF资源需要和当前站点同域，或配置了正确的CORS跨域规则，否则无法正常触发加载和打印逻辑

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