用 css 不工作在 chrome 中打印 div
[英]print div in chrome with css not working
問題描述
我正在使用 window.print(); 對於在網頁上打印特定部分，它在 Firefox 瀏覽器上工作，但在 Chrome 中無法正常工作，它向我顯示空白打印預覽。
<script type="text/javascript">
function printDiv() {
var divToPrint = document.getElementById('table');
var htmlToPrint = '' +
'<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />'+
'<link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />';
$(document).ready(function() {
$('#customers').dataTable();
} );
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
</script>
上面的代碼在 chrome 中也能正常工作，但從過去 15 天開始，它在 chrome 中不起作用，但在 Firefox 中工作
2 個解決方案
解決方案1
1 已采納 2016-04-24 20:44:15
以下代碼對我有用
<script type="text/javascript">
$(function () {
$("#btnPrint").click(function () {
var contents = $("#table").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />');
frameDoc.document.write('<link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
</script>
解決方案2
0 2021-10-22 17:25:50
我有一個類似的問題，我想用給定的 css 打印一個創建的窗口，但 css 不適用於 chrome。
事實證明，我們需要等到創建的窗口加載完畢，然后才能嘗試打印它（在此處找到： https : //stackoverflow.com/a/25396932/13294887 ）。 基本上通過使用
myWindow.onload = function() {
myWindow.print();
myWindow.close();
};
使用CSS打印DIV內容，不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.