打印 iframe 内容没有打印所有内容

Question

我创建了一个 JavaScript 函数来打印 iFrame 的内容。

    <a href="#" onclick="printBGReport();" align="center">Print Report</a> <br/>
    <script>
        function printBGReport(){
            var content = document.getElementById("printBGReport").innerHTML;
            var mywindow = window.open('', 'Print', 'height=600,width=800');
            mywindow.document.write(content);
            mywindow.document.close();
            mywindow.focus()
            mywindow.print();
            mywindow.close();
            //return;
        }
    </script>
<div id="printBGReport">
    <iframe id="reportBGID" name="reportBGID" src="myiFrameURL" width="900" height="1000" align="center" target="_self" valign="top" scrolling="yes" frameborder="no">
</div>

但是，它并未打印所有内容。看起来它只是打印第一页。有谁知道为什么？

谢谢

Answer 1

假设 iframe 指向同一域中的页面（参见CORS restrictions），您可以调用iframe.contentWindow.print()。

document.getElementById("reportBGID").contentWindow.print()

如果 iframe 指向另一个域（您可以控制），您可以使用 postMessage 触发页面上的函数以调用 window.print()。

---

或者，您可以将 iframe 复制到新窗口中，然后打印：

function printIframe(iframe) {
  const tempWindow = window.open('', 'Print', 'height=600,width=800')

  const newIframe = document.createElement('iframe')
  newIframe.src = iframe.src

  newIframe.style = `border: 0; width: 100%; height: 100%;`
  tempWindow.document.body.style = `margin: 0;`

  tempWindow.document.body.appendChild(newIframe)

  newIframe.onload = () => {
    tempWindow.print()
    tempWindow.close()
  }
}

<button onclick="printIframe(document.getElementById('iframe'));">
    Print Iframe
    </button>

<iframe id="iframe" src="https://example.com"></iframe>