在IE中打印时,iframe在底部切割
cod*_*441 17 html javascript css internet-explorer internet-explorer-11
在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>
在铬上它工作正常.iframe的内容扩展并全部打印
我试图找到一些解决方法来获得或多或少的相同结果.这些解决方案应该适用于任何浏览器.
看看解决方案4.它似乎最接近你想要达到的目标.(以工作为例)
解决方案1:我认为我有一个不完美的解决方案,但可能会完成这项工作.
在打印之前,您将iframe替换为iframe的图像.我发现这个库名为iframe2image:https://github.com/twolfson/iframe2image.
要捕获打印事件,您可以使用此问题的答案:https://stackoverflow.com/a/23170458/2525304
我没有机会测试它,但我认为你可以得到一些东西.
编辑:
解决方案2: 这是另一种认为可行的方法.您可以使用此Html到PDF API首先将iframe的内容转换为pdf.然后在iframe中包含此pdf(例如,使用PDF.js)并打印页面.
这是另一个api这样做:http://www.convertapi.com/web-pdf-api
编辑2:
解决方案3(工作示例):
我刚刚找到这个网站,它允许您嵌入一个Save page to PDF按钮,该按钮将返回用户所在页面的pdf版本.您可以使用此按钮替换页面上的打印按钮,并告诉用户打印生成的pdf.
唯一的问题是用户被发送到另一个网站下载文件.我认为您在支付基本会员资格时可以直接链接到pdf文件(5美元/月).可能有类似的服务提供我没有找到的免费直接链接.
编辑3:
解决方案4(带有工作示例):
我刚刚找到一个网站,它直接链接到页面生成的PDF文件.更多信息请访问:http://pdf-ace.com/save-as-pdf-button/
工作示例(我替换了Print按钮)
我实际上只需添加一个max-height元素并将其设置为max-height: 100%;允许页面继续的内容.
您应该有三个现有的样式元素,其中两个已经编写过.
他们是:
width: 100%;
height: 6000px;
max-height: 100%;
我认为你body有absolute定位.尝试创建和调整height绝对定位元素的CSS 属性.由于我没有标记和/或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>- 你的`max-height:100%`的例子不起作用. (2认同)