程序员经验分享-hwhale

IE 打印时 iframe 在底部剪切

2023-12-28

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


我试图找到一些解决方法来或多或少地达到相同的结果。这些解决方案应该可以在任何浏览器上正常工作。

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

解决方案一：我认为我有一个并不完美的解决方案，但可能可以完成工作。

在打印之前，您可以将 iframe 替换为 iframe 的图像。我发现这个图书馆叫iframe2image : https://github.com/twolfson/iframe2image https://github.com/twolfson/iframe2image.

要捕获打印事件，您可以使用此问题的答案：https://stackoverflow.com/a/23170458/2525304 https://stackoverflow.com/a/23170458/2525304

我还没有机会测试它，但我认为你可以用它来做一些事情。

EDIT:

解决方案2：这是另一个可行的想法。你可以用这个Html 转 PDF API http://pdfcrowd.com/html-to-pdf-api/首先将 iframe 的内容转换为 pdf。然后将此 pdf 包含在 iframe 所在的位置（通过使用PDF.js http://mozilla.github.io/pdf.js/例如）并打印页面。

这是另一个 api 执行此操作：http://www.convertapi.com/web-pdf-api http://www.convertapi.com/web-pdf-api

EDIT 2:

解决方案 3（工作示例）：我刚刚发现这个网站 https://www.web2pdfconvert.com/pdf-button可以让你嵌入一个Save page to PDF按钮将返回用户所在页面的 pdf 版本。您可以用此按钮替换页面上的打印按钮，并告诉用户打印生成的 pdf。

工作示例 http://pathologist-crocodile-13111.bitballoon.com/

唯一的问题是用户被发送到另一个网站来下载文件。我认为您在付款时可以获得 pdf 文件的直接链接基本会员资格 http://www.web2pdfconvert.com/membership（5 美元/月）。 可能有类似的服务免费提供直接链接，但我没有找到。

EDIT 3:

解决方案 4（带有工作示例）：

我刚刚找到一个网站，它提供了页面生成的 PDF 文件的直接链接。更多信息请点击这里：http://pdf-ace.com/save-as-pdf-button/ http://pdf-ace.com/save-as-pdf-button/

工作示例 http://porter-frank-45400.bitballoon.com/（我更换了Print button)

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

internetexplorer

internetexplorer11

IE 打印时 iframe 在底部剪切 的相关文章