使用Print.js打印PDF时无法显示打印模态框的问题求助

我之前也遇到过类似的PDF打印模态框不显示的坑，结合你描述的情况——图片能正常弹出模态框，PDF只闪一下还触发了onPrintDialogClose——给你几个实际可行的排查和解决思路：

• 先确认PDF文件的路径与加载状态
  首先检查'53544.pdf'的路径是否绝对正确，比如是不是和当前页面同域？如果是相对路径，有没有可能因为页面路由变化导致路径失效？试试换成绝对路径（比如'/static/53544.pdf'）再测试。
  另外，3秒延时不一定能保证PDF加载完成，尤其是体积较大的PDF。可以先预加载PDF，确认加载成功后再调用Print.js：

  fetch('53544.pdf')
    .then(res => {
      if (!res.ok) throw new Error('PDF加载失败');
      return res.blob();
    })
    .then(() => {
      printJS({
        printable: '53544.pdf',
        type: 'pdf',
        showModal: true,
        fallbackPrintable: () => console.log("FallbackPrintable"),
        onPrintDialogClose: () => console.log('The print dialog was closed'),
        onIncompatibleBrowser: () => console.log('Pdf was opened in a new tab due to an incompatible browser')
      });
    })
    .catch(err => console.error(err));
  

• 排查浏览器兼容性问题
  Print.js的PDF模态框打印依赖浏览器的内嵌PDF预览能力，部分浏览器（比如旧版Safari、某些移动端浏览器）不支持这种方式，会直接跳转到新标签页打开PDF，这时候就会出现“闪一下+触发关闭事件”的情况。你可以先在Chrome、Firefox这些主流桌面浏览器测试，如果能正常显示模态框，那就是浏览器兼容性问题，这时候可以考虑启用fallbackPrintable做降级处理，比如提示用户手动打印新标签页的PDF，或者把PDF转成图片后再打印。

• 检查Print.js版本与配置细节
  旧版本的Print.js可能存在PDF模态框的bug，建议更新到最新稳定版试试。另外，你可以添加modalMessage配置，比如modalMessage: '正在加载PDF，请稍候...'，看看是不是模态框其实显示了但因为PDF加载异常瞬间关闭，这样能更直观看到状态。

• 排查页面CSS/JS冲突
  有时候页面的全局CSS会干扰Print.js的模态框样式，比如过高的z-index覆盖了模态框，或者全局样式隐藏了模态框元素。可以在一个干净的空白页面里只引入Print.js和你的打印代码测试，如果能正常显示，就回到原页面逐步排查CSS或JS冲突（比如禁用部分样式/脚本，找出影响的代码）。

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