Bootstrap模态框内嵌PDF的iframe调用window.print()截断问题求助

问题原因 #

浏览器打印网页时，对原生图片元素的渲染逻辑和内嵌PDF的处理机制不同：图片属于网页原生资源，打印时能被直接完整识别；而PDF是通过iframe加载的外部资源，若未等待其完全渲染就触发打印，或模态框的默认打印样式限制了容器尺寸，就会导致内容截断。

具体解决方法 #

1. 等待PDF加载完成后再触发打印 #

通过监听iframe的加载状态，确保PDF完全渲染后再执行打印操作，同时聚焦到iframe内容窗口，让浏览器优先处理PDF的打印逻辑：

<!-- 模态框内的PDF iframe -->
<iframe id="pdfFrame" src="your-local.pdf" frameborder="0"></iframe>
<!-- 自定义打印按钮 -->
<button onclick="printPDF()">打印PDF</button>

<script>
function printPDF() {
  const pdfFrame = document.getElementById('pdfFrame');
  // 检查PDF是否已加载完成
  if (pdfFrame.readyState === 'complete') {
    pdfFrame.contentWindow.focus();
    pdfFrame.contentWindow.print();
  } else {
    // 未加载完成时，监听load事件后再打印
    pdfFrame.onload = function() {
      pdfFrame.contentWindow.focus();
      pdfFrame.contentWindow.print();
    };
  }
}
</script>

2. 重置打印样式，解除模态框尺寸限制 #

默认的Bootstrap模态框样式在打印时可能会限制容器高度/宽度，导致PDF内容被截断。添加打印专属CSS，让模态框和iframe在打印时占满可用空间：

@media print {
  .modal-dialog {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .modal-content {
    height: 100% !important;
    border: none !important;
    box-shadow: none !important;
  }
  .modal-body {
    overflow: visible !important;
    height: 100% !important;
  }
  #pdfFrame {
    width: 100% !important;
    height: 100% !important;
  }
  /* 隐藏打印不需要的模态框头部/尾部 */
  .modal-header, .modal-footer {
    display: none !important;
  }
}

3. 直接打印iframe内容而非整个页面 #

放弃调用window.print()打印整个页面，改为直接打印iframe的内容窗口，让浏览器专门处理PDF的打印渲染，避免页面其他元素干扰：

// 直接打印iframe内容的简化写法
document.getElementById('pdfFrame').contentWindow.print();

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