当用户选择 file->print 时仅打印 iframe 的内容答案

【问题标题】：Printing only the contents of an iframe when a user selects file->print当用户选择 file->print 时仅打印 iframe 的内容
【发布时间】：2016-10-10 18:33:29
【问题描述】：

问题：

我有一个应用程序可以将其他服务器的内容加载到<iframe> 中。用户希望能够打印 iframe 中的内容，这有时会很长并导致 iframe 滚动。打印时，仅打印 iframe 视口中显示的区域。其余的被切断。

我的尝试：

使用@media print 样式，我可以隐藏页面上的所有其他元素并将iframe 扩展为100% 的宽度和高度。我不能 AFAICT 将其大小调整为实际内容的 w/h（仅使用 CSS），因此如果 100% 还不够，内容将被截断。

我知道这可以通过 javascript 解决，但浏览器并没有始终如一地为 file->print 提供事件挂钩，因此我无法在需要时运行 javascript。

我可以制作一个自定义的“打印”按钮，以便 JS 可以运行并正确打印 iframe，但它不允许“打印预览”，因为浏览器不为此提供 JS 方法.

我被难住了，有答案吗？

【问题讨论】：

标签： javascript html css iframe printing

【解决方案1】：

如果您想打印 iframe 的内容，您可以使用

document.getElementById('ifr1').contentWindow.print()

这将在 iframe（而不是容器窗口）的内容上调用 print()。

【讨论】：

这并不能解决问题。用户想要使用文件->打印或打印预览，我需要能够连接到它并只显示 iframe 内容。
File->print 将打印“父”窗口。如果您必须使用它 - 您唯一的选择是将 iframe 的位置设置为 0-0（左上角），将 iframe 的宽度设置为窗口的宽度，并将 iframe 的高度设置为高度它的内容。这是您可以真正打印/预览窗口的唯一方法，实际的“输出”将是 iframe 的全部内容。
正确，但为了做到这一点，我需要一种在用户打印或请求打印预览时运行 JS 函数的方法。似乎没有一致的方法来做到这一点。