如何使用iframe和css打印网页

我必须打印对话框的内容。我添加一个空的iframe，然后我在javascript中添加内容。如何使用iframe和css打印网页

这是我的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是没有应用相当不错。

在选项中的打印页面上，我检查了'Background Graphichs'，我使用的是谷歌浏览器。

来源

2016-09-16 lacexd

在装入样式之前，您正在呼叫frame.print()。 “

”一旦样式表及其所有导入的内容已被加载和解析，并且在样式开始应用于内容之前，load事件就会触发。“

试试这个：

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

参考

来源

2016-09-19 17:38:10 abbotto

这并不能保证所有的CSS加载，刚刚过去的一个，他们可能会不按顺序完成 –

我的推理是CSS文件按照它们的包含顺序加载。最后一个样式表加载后，打印框架。你能提供一个你正在谈论的例子吗？ – abbotto

我错了，从来没有保证所请求的四个CSS文件将按顺序返回，但是加载事件直到解析后才会触发。在这种情况下，即使在第一次下载最后一个CSS之前，它也能保证等待。请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Stylesheet_load_events。 '一旦样式表及其所有导入的内容都被加载并解析，并且在样式开始应用于内容之前，load事件就会触发。' –

如何使用iframe和css打印网页

回答

相关问题