Question

在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的内容扩展并全部打印

Answer 1

我试图找到一些解决方法来获得或多或少的相同结果。这些解决方案应该适用于任何浏览器。

查看解决方案4.它似乎最接近您想要实现的目标。（有工作示例）

解决方案1：我认为我的解决方案并不完美，但可以胜任。

在打印之前，您将iframe替换为iframe图像。我发现此库名为iframe2image：https://github.com/twolfson/iframe2image。

要捕获打印事件，您可以使用此问题的答案：https://stackoverflow.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按钮）

Answer 2

我实际上只需要添加一个max-height元素并将其设置为max-height: 100%;，这是允许页面继续的原因。

您应该有三个现有的样式元素，其中两个已经编写过。

他们是：

width: 100%;
height: 6000px;
max-height: 100%;

我认为你的body有absolute定位。尝试创建和调整绝对定位元素的CSS height属性。由于我没有标记和/或CSS，我无法说明需要在哪个元素上设置height。很可能，它将是100%或auto。可能甚至是两者的结合。

当我将您提供的代码复制并粘贴到文件中，然后打开它并尝试打印时，我确实收到了同样的问题。然而，我上面所描述的似乎伸展/修复它几乎没有问题。

目前它是如何为我写的：

＆＃13;

.myiframe {
  width: 100%;
  height: 6000px;
  max-height: 100%;
}

＆＃13;

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

＆＃13;

在IE中打印时，iframe在底部切割

2 个答案: