如何实现打开blobURL后自动打印新窗口内的PDF文件？

现有问题 #

现有代码会打印原窗口内容而非新窗口PDF，核心原因如下：

• 直接调用window.print()时，执行上下文是当前代码所在的父窗口，和新打开的PDF窗口没有关联，只会触发父页面的打印流程
• 代码中重复定义了两次pdfExpComplete回调，后者会覆盖前者，存在逻辑冗余
• 新窗口加载PDF资源需要一定耗时，未等资源加载完成就触发打印会出现内容缺失、对象错误问题

修复后代码 #

直接替换原有重复声明的pdfExpComplete方法即可：

$scope.pdfExpComplete = function (args) {
  args.promise.then(function (e) {
    // 生成PDF对应的Blob临时地址
    const blobURL = URL.createObjectURL(e.blobData);
    // 打开新窗口加载PDF，同时保存新窗口的操作引用
    const pdfWindow = window.open(blobURL);

    // 等新窗口PDF完全加载完成后，触发新窗口自身的打印方法
    pdfWindow.onload = function () {
      // 加150ms延迟兼容Chromium内核浏览器的加载时序问题，可根据实际情况调整时长
      setTimeout(() => {
        pdfWindow.print();
        // 不需要保留Blob地址可放开下方注释，释放内存占用
        // URL.revokeObjectURL(blobURL);
        // 不需要保留PDF窗口可放开下方注释，打印触发后自动关闭窗口
        // pdfWindow.close();
      }, 150);
    }
  });
};

兼容注意事项 #

• 部分浏览器默认拦截自动唤起的打印/弹窗，需要用户给当前站点开放弹窗权限才能正常运行
• 不要用file://协议本地打开页面调试，建议启动本地静态服务访问，否则会触发浏览器安全限制导致打印失败
• 如果页面嵌入在iframe中，需确保iframe和父页面同域，否则会拿不到新窗口的操作权限

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