javascript - 如何使用 iframe 和 css 打印网页

Question

我必须打印对话框的内容。我正在添加一个空的 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。

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

Answer 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);

引用资料

• https://github.com/abbotto/teleprint/blob/master/src/components/print.js
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Stylesheet_load_events