iframe内容在打印时被切断 [英] iframe content gets cut off when printing

问题描述

我有一个包含iframe的网页。 iframe的内容长度为几页，我设置了iframe的高度来匹配它的内容。当我尝试打印页面时，iframe的内容在第一页后被截断。我使用打印样式表打印时隐藏了页面上的所有其他元素/部分，除了iframe。因此，它是打印时页面上唯一的元素。我已尝试通过以下几种方式设置iframe的固定高度：

I have a page with an iframe in it. The iframe's content is a couple of pages long, I've set the iframe's height to match it's content. When I try to print the page, the content of the iframe gets cut off after the first page. I've hidden all other elements/parts on the page while printing with a print stylesheet, except for the iframe. So it's the only element on the page when printed. I've tried setting the iframe's fixed height in a couple of ways:

<iframe src="page.html" style="height: 2100px;" height="2100" scrolling="yes">

我还试图在一个只打印的样式表中设置iframe的固定高度，但没有什么工作至今。

I've also tried to set the iframe's fixed height in a print only stylesheet, but nothing has worked so far. It does accept other styling like a width or a border, which is visible when printing, but only for the first page.

更新：它会接受其他样式，例如宽度或边框（在打印时可见）似乎在Chrome中正常工作，但它是Firefox中的一个已知且旧的（2001年）错误： https://bugzilla.mozilla.org/show_bug.cgi?id=113217
无法找到一个确切的错误报告为IE，但它似乎遭受与Firefox相同的命运。

UPDATE: It seems to be working correctly in Chrome, but it's a known and old (2001) bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=113217 Can't find an exact bug report for IE, but it seems to suffer the same fate as Firefox.

推荐答案

此来源表示，您可以在IE 5+，Firefox 6+，Chrome 9+和Safari 5.1+（Opera无法运行）中检测打印请求。

This source from 2012 says you can detect print requests in IE 5+, Firefox 6+, Chrome 9+, and Safari 5.1+ (Opera didn't work).

(function() {
    var beforePrint = function() {
        console.log('Functionality to run before printing.');
    };
    var afterPrint = function() {
        console.log('Functionality to run after printing');
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}());

捕获了这些事件后，您可以为 iframe code>其中它表示

Having caught the events you can then do something special for your iframe where it says

console.log('Functionality to run before printing.');

这篇关于iframe内容在打印时被切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！