0

I'm trying to add the css file to the HTML content while printing it. But the css file is not getting added. I'm getting the output without the CSS. Can anyone please help me...

Here is my code

<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> 
<script type="text/javascript">

    function PrintElem(elem)
    {
        Popup($(elem).html());
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'mydiv', 'height=700,width=1200');
        mywindow.document.write('<html><head><title></title>');
        mywindow.document.write('<link rel="stylesheet" href="print.css" type="text/css" media="print"/>');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        mywindow.print();
        mywindow.close();

        return true;
    }

</script>
</head>
<body>

<div id="mydiv">
    This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante. 
</div>

<div>
    This will not be printed.
</div>

<div id="anotherdiv">
    Nor will this.
</div>

<input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />

</body>
</html>

and this is my CSS file 'print.css'

@media print {
 #mydiv {
  border: 10px solid !important;
  color: red;
  font-size:20px !important;
 }
}
Maria
  • 167
  • 1
  • 4
  • 16
  • check this path if it is correct or not href="print.css" it indicates your css file is in directory of the file which is adding it in html – Irfan Anwar Aug 26 '15 at 11:46
  • Path is correct. both the html and css files are under the same folder – Maria Aug 26 '15 at 12:04
  • I can't seem to be able to open the window at all. I get a `InvalidAccessError: A parameter or an operation is not supported by the underlying object`. Might be an SO problem... Can you post a link to a working version? – nils Aug 26 '15 at 12:22
  • SO blocks the `window.open` call. – vijayP Aug 26 '15 at 12:23
  • please see my answer below, if it works let me know, or send me your code at m.irfan.anwar on skype, thanks – Irfan Anwar Aug 26 '15 at 12:29
  • Why use javascript to add the file? Cant you just always add the css file? THe @media makes is so that its only displayed when some one tries to print the page. – Persijn Aug 26 '15 at 12:30
  • @Persijn because the entire popup is dynamically generated. He's using a common trick to make a printer friendly popup of some content on the current page. – dmeglio Aug 26 '15 at 12:49

1 Answers1

0

Figured out where you are making problem:

  1. You are passing element 'mydiv' to function PrintElem.
  2. PrintElem function is fetching only inner html and not complete div
  3. you are sending it to another function Popup (only innerhtml of mydiv)
  4. Popup is opening new page with some html, css and js
  5. in data variable you only get text and not DIV 'mydiv', which was actually needded instead of inner html only.
  6. So when your page loads it do not find mydiv where you are applying css on.

Solution please pass entire div rather then just div.html() into Popup funciton

try something like this or try other way to do so

 function PrintElem(elem)
 {
    Popup($(elem)); // send div not html only
 }
Irfan Anwar
  • 1,878
  • 17
  • 30
  • I may be mistaken, but it might be better to make the CSS inline too. Loading the print.css will happen asynchronously. It's possible that it doesn't load by the time `window.print()` executes since it's only a couple of js lines below the `document.write`. It looks like it's a very small file, so it's unlikely, but I believe it could happen. – dmeglio Aug 26 '15 at 12:49
  • Hi, Thank you so much for your suggestion. It's working now... :) – Maria Aug 26 '15 at 12:51
  • Perfect solution :) Thanks – Sajjad Ali Sep 04 '15 at 10:50