CODEWITHSUNDEEP
jquerycss
Keith
Keith

Reputation: 4147

How to add CSS file to print()

I've seen a couple answers to this but it doesn't seem to work for me. I have a function to print a grid, but the CSS doesn't transfer over ( unless I manually add in a style ). How do I add a CSS file? I've tried:

$("#btn").click(function (e) {
        var divToPrint = document.getElementById("expertiseTable");
        newWin = window.open("");
        //var myStyle = '<link rel="stylesheet" type="text/css" href="http://localhost:59840/Content/Site.css" />';
        newWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="http://localhost:59840/Content/Site.css" /></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
        newWin.print();
});

Placing http://localhost:59840/Content/Site.css into the broswer brings up my CSS file so I know its there, but when I try to print it doesn't seem to find it.

Upvotes: 0

Views: 1450

Answers (1)

Georgios Syngouroglou
Georgios Syngouroglou

Reputation: 19944

Did yout tried something like, 

newWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="http://localhost:59840/Content/Site.css" media="print" /></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');

Found here.

I placed the media="print" attribute.

There is also the option of the @media print usage,

<style type="text/css">
    @media print{
        .aClass { display: none; }
    }
</style>

Upvotes: 1

Related Questions