在 IE 中打印时 iframe 在底部切割
Posted
技术标签:
【中文标题】在 IE 中打印时 iframe 在底部切割【英文标题】：Iframe cuts at the bottom when printing in IE 【发布时间】：2017-12-18 09:09:01 【问题描述】：在 IE11 打印下面的页面时，在底部剪切 iframe，而不是让它扩展到下一页。如何防止这种情况并让它打印所有内容？
注意：要重现此问题，只需将以下代码粘贴到记事本中并在 IE 中打开即可
<html >
<head>
<style>
.myiframe
width:100%;
height:6000px;
</style>
</head>
<body>
<div>
<a href="javascript:print()" ><h1>Print</h1></a>
</div>
<iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki"/>
<div>
The rest of the page
</div>
</body>
</html>
在 chrome 上可以正常工作。 iframe 的内容展开并全部打印出来
【问题讨论】：
Printing Iframe in IE 11 only prints first page的可能重复 看看这是否有帮助appnovation.com/blog/how-avoid-your-web-printing-page-being-cutsupport.microsoft.com/en-in/help/973479/…answers.microsoft.com/en-us/ie/forum/ie11-windows_7/… 1) 我在 Edge 和 Firefox 中看到了相同的行为（对于 IE）。 2) 不是底部被切割的问题，它只是为包含iframe 的此 HTML 打印的第一页。您对此有何看法？
这真的是一样的question/issue。
你能修复你的 HTML 吗？ iframe 必须有结束标签，所以应该是<iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki"></iframe>。
【参考方案1】：
实际上我只需要添加一个max-height 元素并将其设置为max-height: 100%;，这就是允许页面继续运行的原因。
你应该有三个现有的样式元素，其中两个是你已经写好的。
他们是：
width: 100%;
height: 6000px;
max-height: 100%;
我假设您的body 具有absolute 定位。尝试创建和调整绝对定位元素的 CSS height 属性。由于我没有标记和/或 CSS，我不能说需要在哪些元素上设置 height。很有可能是100% 或auto。甚至可能两者兼而有之。
当我将您提供的代码复制并粘贴到一个文件中，然后打开它并尝试打印时，我确实收到了同样的问题。但是，我上面描述的内容似乎可以扩展/修复它，几乎没有问题。
目前是如何为我写的：
.myiframe
width: 100%;
height: 6000px;
max-height: 100%;
<div>
<a href="javascript:print()">
<h1>Print</h1>
</a>
</div>
<iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki" />
<div>
The rest of the page
</div>【讨论】：
这不是为我做的。那么这些样式元素在myiframe 类中对吗？您是否使用打印链接和 IE11 进行打印？
是的，单击“打印”重定向并在 IE11 中打开表单几次以对其进行测试。奇怪的是它们有何不同。您是否遇到了看似相同类型的问题，还是看起来与以前有所不同？
除了添加max-height: 100%打印输出时，如果只有2页，几乎是相同的问题，一页只有打印链接，另一页有iframe。如果没有max-height: 100%，它会在最后打印一个额外的空白页
填充和很多其他的东西都不起作用。只是为了 100% 确定我们没有不同的代码，您能否将所有代码粘贴到您的 html 文件中的答案中。谢谢
嗨@DrewFarber，我对你的回答做了一个小的修改。无需指出答案的编辑/添加。它们可以随着时间的推移而发展。将 cmets 留给 cmets，他们不应该出现在答案中。 *** 上的答案旨在为未来提供有用的解决方案，因此请牢记这一点。 Stack sn-ps 是以紧凑的方式提供工作示例的绝佳方式。而在多重答案的问题上，不需要多重答案，因为它们提供了一个答案。【参考方案2】：
我试图找到一些解决方法来或多或少地获得相同的结果。这些解决方案应该适用于任何浏览器。
查看解决方案 4。它似乎最接近您想要实现的目标。 （带有工作示例）
解决方案 1：我认为我有一个不完美的解决方案，但可能会完成这项工作。
就在打印之前，您将 iframe 替换为 iframe 的图像。我找到了这个名为iframe2image 的库：https://github.com/twolfson/iframe2image。
要捕捉打印事件，可以使用这个问题的答案：https://***.com/a/23170458/2525304
我还没有机会测试它，但我认为你可以用这个来做点什么。
编辑：
解决方案 2：这是另一种可行的方法。您可以使用 Html to PDF api 首先将 iframe 的内容转换为 pdf。然后在 iframe 所在的位置包含此 pdf（例如使用 PDF.js）并打印页面。
这是另一个执行此操作的 api：http://www.convertapi.com/web-pdf-api
编辑 2：
解决方案 3（工作示例）：
我刚刚找到this website，它可以让您嵌入一个Save page to PDF 按钮，该按钮将返回用户所在页面的pdf 版本。您可以用此按钮替换页面上的打印按钮，并告诉用户打印生成的 pdf。
Working example
唯一的问题是用户被发送到另一个网站来下载文件。我认为您可以在支付basic membership（5 美元/月）时获得指向 pdf 文件的直接链接。 可能有类似的服务免费提供我没有找到的直接链接。
编辑 3：
解决方案 4（带有工作示例）：
我刚刚找到了一个网站，该网站提供了指向该页面生成的 PDF 文件的直接链接。更多信息在这里：http://pdf-ace.com/save-as-pdf-button/
Working example（我替换了Print按钮）
【讨论】：
以上是关于在 IE 中打印时 iframe 在底部切割的主要内容，如果未能解决你的问题，请参考以下文章
Firefox 打印在第一页末尾切割画布，我该如何让它不这样做？