html - iframe 内容在打印时被截断

Question

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

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

我还尝试在仅打印样式表中设置 iframe 的固定高度，但到目前为止没有任何效果。它确实接受其他样式，如宽度或边框，打印时可见，但仅适用于第一页。

更新:它似乎在 Chrome 中工作正常，但它是 Firefox 中一个已知的旧 (2001) 错误:https://bugzilla.mozilla.org/show_bug.cgi?id=113217无法找到 IE 的确切错误报告，但它似乎遭受与 Firefox 相同的命运。

Answer 1

这source从 2012 年开始，您可以在 IE 5+、Firefox 6+、Chrome 9+ 和 Safari 5.1+ 中检测到打印请求(Opera 不起作用)。

(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 做一些特别的事情

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