Javascript Iframe在IE中打印时在底部切割_Javascript_Html_Css_Internet Explorer_Internet Explorer 11

Javascript Iframe在IE中打印时在底部切割

javascript html css internet-explorer

Javascript Iframe在IE中打印时在底部切割,javascript,html,css,internet-explorer,internet-explorer-11,Javascript,Html,Css,Internet Explorer,Internet Explorer 11,在IE11打印下面的页面时，在底部剪切iframe，而不是让它扩展到下一页。我怎样才能防止这种情况发生，并让它打印所有内容注意：要重现这个问题，只需将下面的代码粘贴到记事本中，并在IE中打开它 <html > <head> <style> .myiframe{ width:100%; height:6000px; } </style&

在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>


myiframe先生{
宽度：100%；
高度：6000px；
}
这一页的其余部分

在chrome上工作正常。iframe的内容将展开并全部打印

实际上，我只需添加一个

max height

元素，并将其设置为

max height:100%这是允许页面继续的内容
您应该有三个现有的样式元素，其中两个是您已经编写的
它们是：
width: 100%;
height: 6000px;
max-height: 100%;

你的身体
有绝对
定位，我想。尝试创建并调整绝对定位元素的CSSheight
属性。因为我没有标记和/或CSS，所以我不能说在哪个元素上需要设置什么高度。很可能是100%
或auto
。甚至可能两者兼而有之
当我将您提供的代码复制并粘贴到一个文件中，然后打开它并尝试打印时，我确实收到了相同的问题。然而，我上面所描述的似乎可以扩展/修复它，几乎没有问题
目前它是如何为我编写的：

.myiframe{
宽度：100%；
高度：6000px；
最大高度：100%；
}

这一页的其余部分
我试图找到一些变通方法，或多或少地获得相同的结果。这些解决方案在任何浏览器上都可以正常工作
看看解决方案4。这似乎是最接近你想要达到的目标。（带工作示例）
解决方案1:我想我找到了一个不完美的解决方案，但可能会奏效
在打印之前，您将使用iframe的图像替换iframe。我找到了这个名为iframe2image
的库：
要捕获打印事件，您可以使用此问题的答案：
我还没有机会测试它，但我想你可以用它来做点什么

编辑：
解决方案2:这里是另一个可行的想法。您可以使用它首先将iframe的内容转换为pdf。然后将此pdf包含在iframe所在的位置（例如使用），并打印页面
下面是另一个执行此操作的api：

编辑2:
解决方案3（工作示例）：
我刚刚发现，它允许您嵌入一个将页面保存到PDF
按钮，该按钮将返回用户所在页面的PDF版本。您可以使用此按钮替换页面上的“打印”按钮，并告诉用户打印生成的pdf

唯一的问题是，用户被发送到另一个网站下载文件。我想你可以在支付（5美元/月）的费用时直接链接到pdf文件。
可能有类似的服务提供免费的直接链接，我还没有找到

编辑3:
解决方案4（带工作示例）：
我刚刚发现了一个网站，可以直接链接到该页面生成的PDF文件。更多信息请点击此处：
（我替换了打印按钮）
可能的重复，看看这是否有帮助1）我在Edge和Firefox中看到了相同的行为（如IE）。2） 这不是问题，底部是削减，它只是第一页，只为这个HTML打印包含iframe
。你觉得这个怎么样？这真的是一样的。你能修复你的HTML吗iframe
必须有结束标记，所以它应该是
。它不是为我做的。所以这些样式元素在myiframe
类中，对吗？您是否正在使用打印链接并在IE11中打印？是的，单击“打印”重定向，并在IE11中多次打开表单进行测试。奇怪的是他们之间的区别。您是否遇到了看起来是相同类型的问题，或者与以前有什么不同？除了添加max height:100%
打印输出时，几乎是相同的问题如果只有两页，一页只有打印链接，另一页有iframe。如果没有max height:100%
，它会在尾端空白处打印一个额外的空白页，而其他许多东西都不起作用。为了100%确定我们没有不同的代码，你可以将所有的代码粘贴到你的html文件中。谢谢@DrewFarber，我对你的答案做了一个小编辑。无需指出对答案的编辑/添加。它们可以随着时间的推移而演变。为评论留下评论，它们不应该出现在答案中。Stackoverflow的答案旨在为未来提供有用的解决方案，因此请记住这一点。堆栈片段是一种以紧凑的方式提供工作示例的极好方法。在多答案问题上，不需要多个答案，因为它们提供了一个答案。