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

标签 javascript html css google-chrome iframe

我必须打印对话框的内容。我添加一个空的 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 没有很好地应用。

在选项的打印页面上,我选中了“背景图形”,并且我正在使用谷歌浏览器。

最佳答案

您在样式加载之前调用 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);

引用文献

关于javascript - 如何使用 iframe 和 css 打印网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39537252/

相关文章:

css - 如何在 html5 中将菜单的宽度拉伸(stretch)到全宽

CSS 三列布局,液体居中,无左边距!

javascript - elFinder 打开不同的文件夹

javascript - jquery POST 两次

jquery - XSLT 两列无序列表

javascript - 如何为新添加的行添加背景颜色angularjs

html - 盒子里面的 bool 玛水平溢出

css - 缩进文本区域内的所有行

javascript - 没有 jQuery/Javascript 的窗口中有多个滚动 Pane ?

javascript - 从 JS 对象数组中删除元素