如何使用 iframe 和 css 打印网页答案

【问题标题】：How to print webpages with iframe and css如何使用 iframe 和 css 打印网页
【发布时间】：2017-01-25 00:33:13
【问题描述】：

我必须打印对话框的内容。我正在添加一个空的 iframe，然后我在 javascript 中添加内容。

这是我的 js 代码，我在其中添加 html 和 css 作为 iframe 的子级

    var layoutCSS = new String('<link href="css/ReportPageOne.css" rel="stylesheet" type="text/css">');
    var pageOneCSS = new String('<link href="css/ReportLayout.css" rel="stylesheet" type="text/css">');
    var pageTwoCSS = new String('<link href="css/ReportPageTwo.css" rel="stylesheet" type="text/css">');
    var materialityCSS = new String('<link href="css/MaterialityMatrix.css" rel="stylesheet" type="text/css">');
    window.frames.print_frame.document.head.innerHTML = layoutCSS + pageOneCSS + pageTwoCSS + materialityCSS;
    window.frames.print_frame.document.body.innerHTML = $('#__dialog1-cont').html();
    window.frames.print_frame.window.focus();
    window.frames.print_frame.window.print();

正确打开打印对话框，但 css 应用得不是很好。

在选项的打印页面上，我检查了“背景图形”并且我使用的是谷歌浏览器。

【问题讨论】：

标签： javascript html css google-chrome iframe

【解决方案1】：

您在加载样式之前调用frame.print()。

“加载和解析样式表及其所有导入的内容后，并且在样式开始应用于内容之前立即触发加载事件。”

试试这个：

head.lastChild.addEventListener("load", function (event) {
    // In IE, you have to focus() the Iframe prior to printing
    // or else the top-level page will print instead
    frame.focus();
    frame.print();
}, 0);

参考文献

【讨论】：

这并不能保证所有的 CSS 都已加载，只是最后一个，它们可能会乱序完成
我的理由是 CSS 文件是按照它们被包含的顺序加载的。加载最后一个样式表后，打印框架。你能举例说明你在说什么吗？
我错了，无法保证请求的四个 CSS 文件会按顺序返回，但加载事件在解析之前不会触发。在这种情况下，即使下载最后一个 CSS 在第一个之前完成，也可以保证等待。见developer.mozilla.org/en-US/docs/Web/HTML/Element/…。 The load event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.
我已将您的反馈添加到答案中，感谢您的澄清。