默认打印对话框中没有 html 的背景颜色答案

【问题标题】：Background color of html is not comming in default print dialoag box默认打印对话框中没有 html 的背景颜色
【发布时间】：2017-03-31 12:14:05
【问题描述】：

我创建了一个 div，里面有一些 css 应用（通过 css 文件）。现在我想从整个页面打印那个特定的 div。我面临的问题是所有 css 类都应用于打印对话框但未应用背景颜色。

这是我打开默认打印对话框的打印按钮代码块：

$("#btnPrint").click(function () {
    var contents = $("#Call").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>Call</title>');
    frameDoc.document.write('</head><body>');
    //Append the external CSS file.
    frameDoc.document.write('<link href="../css/abc.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);});

这是我在页面上的 div：

这是显示 div 预览的打印对话框：

请帮我应用后台打印对话框。

谢谢

【问题讨论】：

更改 chrome 布局的打印设置。取消选中“block bg”框。它在“更多设置”中
可悲的是你不能用代码来改变它
stackoverflow.com/questions/3893986/…的可能重复

标签： html css printing

【解决方案1】：

选项 1：-

如果您不介意浏览器兼容性，请使用

-webkit-print-color-adjust: exact;

这将工作only in chrome

选项 2：-

要使其在所有浏览器中都可打印（带有图像和颜色），您必须使整个打印元素没有背景图像和背景颜色。而不是他们使用image tag and border colors 和@media print (read more)

手动选项：-

您必须在打印时手动检查打印背景（Chrome：“背景图形”，Firefox：“打印背景”）。这将显示背景颜色和背景图像。如果您担心浏览器兼容性，我们无法通过代码控制打印。

铬：-

火狐：-

[

【讨论】：

我们需要这个打印功能在所有浏览器中都能正常工作，我们不需要在浏览器中手动设置。我已经点击了这个链接，并且在所有浏览器中都可以正常工作aspsnippets.com/Articles/…。

【解决方案2】：

对于 chrome 和 safari，您可以通过 -webkit-print-color-adjust property 规则强制打印背景颜色，例如

body {
 -webkit-print-color-adjust: exact;
}

阅读更多关于它here

【讨论】：