CODEWITHSUNDEEP
htmlcssprinting
Trimantra Software Solution
Trimantra Software Solution

Reputation: 3329

Background color of html is not comming in default print dialoag box

I have create one div, inside that there are some css applied (through the css file). Now I want to print that particular div from the whole page. The problem which I'm facing that all the css classes are applied in print dialog but background color is not applied.

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: enter image description here

Here is the print dialog which shows the preview of the div: enter image description here

Please help me to apply background print dialog.

Thanks

Upvotes: 1

Views: 1643

Answers (2)

jafarbtech
jafarbtech

Reputation: 7015

Option 1:-

If you dont mind about browser compatibility then use 

-webkit-print-color-adjust: exact;

this will work only in chrome

Option 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)

Manual Options:-

you have to manually check the print background (Chrome : "background graphics", Firefox : "Print Background") while printing. this will display both background colors and background images. we can not control printing through code if you concern about browser compatibility.

Chrome:-

print web pages with background in Chrome

Firefox:-

[print web pages with background in Firefox[3]

Upvotes: 2

R andom
R andom

Reputation: 101

for chrome and safari you can force printing background color by -webkit-print-color-adjust property rule, for example 

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

read more about it here

Upvotes: 1

Related Questions