How to load and use css file while printing a div

Question

I need to print a particular div as it is ie whatever css style is there same as that. For styling I am using bootstrape.css and mycss.css file. But after clicking print all css vanished. Here is my try (implemented one):

function printProfile(){            
    var contents = $("#profileContent").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();
    frameDoc.document.write('<html><head><title>Profile Contents</title>');
    frameDoc.document.write('<link href="css/bootstrape.min.css" rel="stylesheet" type="text/css" />');
    frameDoc.document.write('<link href="css/mycss.css" rel="stylesheet" type="text/css" />');
    frameDoc.document.write('</head><body>');
    frameDoc.document.write(contents);
    frameDoc.document.write('</body></html>');
    frameDoc.document.close();

    setTimeout(function () {
        window.frames["frame1"].focus();
        window.frames["frame1"].print();
        frame1.remove();
    }, 100);
}

where I am going wrong?

i am not very fond of media query. But I tried this: @media print { p {background-color: green;} } for checking purpose. How to use this media query here? — Joe
– Joe, Commented Jun 7, 2016 at 11:22
Note that some browsers do not respect background colors. For example in Firefox the user hast to tick "Print background colors" to allow this. If not necessary use borders, saves on ink and works in all modern browsers. — aley
– aley, Commented Jun 7, 2016 at 11:29

Shweta Matkar · Accepted Answer · 2016-06-07 11:42:38Z

1

try media="print" while loading css

<link href="css/mycss.css" rel="stylesheet" type="text/css" media="print"/>

answered Jun 7, 2016 at 11:42

Shweta Matkar

3111 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joe Over a year ago

no its not effecting . if i commented .print() method and callinf .open() normally its effecting. But i need it to in print mode.

Shweta Matkar Over a year ago

write your code for print in @media print { }

Collectives™ on Stack Overflow

How to load and use css file while printing a div

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related