html的背景颜色未在默认打印拨号框中出现

Question

I have create one div, inside that there are some css applied (through the css file). 我创建了一个div，里面有一些css应用（通过css文件）。 Now I want to print that particular div from the whole page. 现在我想从整个页面打印出特定的div。 The problem which I'm facing that all the css classes are applied in print dialog but background color is not applied. 我面临的问题是所有css类都应用于打印对话框，但不应用背景颜色。

Here is my code block of print button which opens a default print dialog: 这是我的打印按钮的代码块，它打开一个默认的打印对话框：

$("#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);});

Here is the my div on page: 这是我在页面上的div：

Here is the print dialog which shows the preview of the div: 这是打印对话框，显示div的预览：

Please help me to apply background print dialog. 请帮我申请背景打印对话框。

Thanks 谢谢

Answer 1

Option 1:- 选项1：-

If you dont mind about browser compatibility then use 如果您不介意浏览器兼容性，请使用

-webkit-print-color-adjust: exact;

this will work only in chrome 这只only in chrome

Option 2:- 备选案文2： -

To make it printable(with image and colors) in all browsers you have to make the whole printing elements without background image and background colors. 要使其在所有浏览器中都可打印（使用图像和颜色），您必须使整个打印元素不具有背景图像和背景颜色。 Instead of them use image tag and border colors with @media print ( read more ) 而不是他们使用@media print image tag and border colors （阅读更多）

Manual Options:- 手动选项： -

you have to manually check the print background (Chrome : "background graphics", Firefox : "Print Background") while printing. 您必须在打印时手动检查打印背景（Chrome：“背景图形”，Firefox：“打印背景”）。 this will display both background colors and background images. 这将显示背景颜色和背景图像。 we can not control printing through code if you concern about browser compatibility. 如果您担心浏览器兼容性，我们无法通过代码控制打印。

Chrome:- 铬：-

Firefox:- 火狐： -

[ [ 在Firefox中打印带有背景的网页[3]

Answer 2

for chrome and safari you can force printing background color by -webkit-print-color-adjust property rule, for example 例如，对于chrome和safari，您可以通过-webkit-print-color-adjust property规则强制打印背景颜色

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

read more about it here 在这里阅读更多相关信息

html的背景颜色未在默认打印拨号框中出现

问题描述

2 个解决方案

解决方案1
2 2016-11-17 04:34:20

解决方案2
1 2016-11-17 05:44:29

html的背景颜色未在默认打印拨号框中出现

问题描述

2 个解决方案

解决方案1 2 2016-11-17 04:34:20

解决方案2 1 2016-11-17 05:44:29

解决方案1
2 2016-11-17 04:34:20

解决方案2
1 2016-11-17 05:44:29