用 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.