HTML中<object>标签嵌入PDF无法正常打印问题求助

我之前也碰到过几乎一模一样的场景——用<object>嵌入PDF后自动触发打印，但总是出现打印内容异常（比如空白、显示不全）的情况，核心问题大概率是PDF还没完全加载渲染完毕，你就急着调用window.print()了。

问题根源 #

$(document).ready()只会等待页面DOM结构加载完成，根本不会管嵌入的PDF资源有没有加载、有没有渲染好。这时候触发打印，浏览器可能还没把PDF内容渲染到页面上，打印出来自然就会出问题。

修复方案：等PDF完全就绪再触发打印 #

我们可以通过监听<object>的加载事件，或者轮询确认PDF的加载状态，确保内容完全渲染后再执行打印逻辑。

方案1：绑定onload事件监听PDF加载完成

给<object>加个ID，然后绑定加载完成事件，确保PDF就绪后再打印：

<body>
  <object id="pdfEmbed" data="/app/pdf/banana.pdf" type="application/pdf" style="width: 100%; height: 100%"></object>
</body>
<script type="text/javascript">
  $(document).ready(function () {
    const pdfEmbed = document.getElementById('pdfEmbed');
    
    // 监听PDF加载完成的事件
    pdfEmbed.onload = function() {
      // 额外加个500ms延迟，确保浏览器彻底渲染完PDF内容
      setTimeout(() => {
        window.print();
        // 打印触发后再设置跳转定时器
        setTimeout(closePrintView, 3000);
      }, 500);
    };
  });

  function closePrintView() {
    document.location.href = 'somewhere.html';
  }
</script>

方案2：轮询检查PDF加载状态（兼容更多浏览器）

有些浏览器对<object>的onload事件支持不太稳定，这时候可以用轮询的方式确认PDF是否加载完成：

<body>
  <object id="pdfEmbed" data="/app/pdf/banana.pdf" type="application/pdf" style="width: 100%; height: 100%"></object>
</body>
<script type="text/javascript">
  $(document).ready(function () {
    const pdfEmbed = document.getElementById('pdfEmbed');
    // 每隔300ms检查一次PDF状态
    const loadChecker = setInterval(() => {
      try {
        // 尝试访问PDF的内部文档对象，能成功访问就说明加载完成了
        if (pdfEmbed.contentDocument || pdfEmbed.getSVGDocument()) {
          clearInterval(loadChecker);
          // 延迟渲染后执行打印
          setTimeout(() => {
            window.print();
            setTimeout(closePrintView, 3000);
          }, 500);
        }
      } catch(e) {
        // 未加载完成时会抛出权限/跨域异常，忽略并继续轮询即可
      }
    }, 300);
  });

  function closePrintView() {
    document.location.href = 'somewhere.html';
  }
</script>

额外提醒 #

如果你的PDF是跨域资源，可能会因为浏览器同源策略限制，导致无法通过contentDocument访问PDF内容。这种情况下建议：

• 后端将PDF转为同域可访问的资源
• 使用PDF.js这类开源库来渲染PDF，它提供了更稳定的加载和打印控制API

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