如何使用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打印網頁

回答

相關問題