基于pdf.js的自助终端PDF自动打印问题求助

搭建自动自助终端实现PDF打印，启用Firefox的silent.print模式，但在弹窗页面打印PDF时遇到问题：打印操作在PDF加载完成前执行，导致空白页。尝试添加循环等待函数延迟打印，结果因为等待函数阻塞了PDF加载，问题依旧。

附当前实现代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Pdf Result</title>
  </head>
  <body>

    <p>Loading resources....</p>
<!-- loading pdf -->
    <div>
        <div>
            <iframe onload="window.print()" id="pdf-js-viewer" src="lib/pdfjs/web/viewer.html?file=test.pdf" title="webviewer" frameborder="0" width="500" height="600"></iframe>
        </div>
    </div>


    <script>
//making script wait
    function wait(ms){
       var start = new Date().getTime();
       var end = start;
       while(end < start + ms) {
         end = new Date().getTime();
      }
    }

    wait(5000);

//printing itself
    document.getElementById("pdf-js-viewer").contentWindow.print(); 
    
    </script>
  </body>
</html>

1. 监听PDF.js原生加载完成事件 #

iframe的onload仅触发viewer页面加载完成，不代表PDF渲染完毕。需监听PDF.js内部的文档加载事件：

• 在PDF.js的viewer.html关联的viewer.js中，找到documentLoaded函数，在末尾添加向父页面发送消息的代码：

  window.parent.postMessage('pdfReadyToPrint', '*');
  

• 父页面监听消息事件，收到后执行打印：

  window.addEventListener('message', (e) => {
    if (e.data === 'pdfReadyToPrint') {
      document.getElementById("pdf-js-viewer").contentWindow.print();
    }
  });
  

2. 替换阻塞式等待为异步延迟 #

你用的循环等待会卡死主线程，直接导致PDF加载停滞，必须替换为setTimeout异步延迟，结合iframe的load事件：

document.getElementById("pdf-js-viewer").addEventListener('load', () => {
  // 延迟时间根据PDF大小调整，确保渲染完成
  setTimeout(() => {
    document.getElementById("pdf-js-viewer").contentWindow.print();
  }, 1500);
});

注意：这种方式适合快速验证，但不如监听原生事件可靠。

3. 直接调用PDF.js内置打印API #

PDF.js提供了原生打印方法，可直接调用确保时机准确：

document.getElementById("pdf-js-viewer").addEventListener('load', () => {
  const viewerApp = document.getElementById("pdf-js-viewer").contentWindow.PDFViewerApplication;
  // 监听PDF文档加载完成事件
  viewerApp.eventBus.on('documentloaded', () => {
    viewerApp.print();
  });
});

这种方式最稳定，完全利用PDF.js的内部机制，避免时机偏差。

4. 确认Firefox静默打印配置 #

确保Firefox的静默打印配置正确生效：

• 打开about:config，设置print.always_print_silent为true
• 设置print.show_print_progress为false
• 提前配置好默认打印机，避免触发打印选择弹窗

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