2

Chrome works great, but I'm having trouble printing the styling on IE and FireFox (especially).

I've gone through many forum posts and I know it's probably something simple.

function printMe() {
        printCSS = new String ('<link href="/a/b/file.css" rel="stylesheet" media="print" type="text/css">')
        window.frames["print_frame"].document.body.innerHTML=printCSS + document.getElementById('div').innerHTML;       
        window.frames["print_frame"].window.focus();       
        window.frames["print_frame"].window.print();      
        window.frames["print_frame"].window.document.close();  
    }
<div class="print-button"><input id="btnSubmit" type="submit" value="Print" class='print-btn' onclick="printMe();" /></div>

@media print {
    .page-break{
        page-break-after: always;
    }
    .print-button{
        display: none !important;
    }   
}
Chad
  • 608
  • 5
  • 15
  • 1
    You are trying to put the link in the body of the iframe. What if you play by the rules and put it in the head instead? – Mr Lister Oct 13 '15 at 17:35
  • Do you mean this? window.frames["print_frame"].document.head.innerHTML=printCSS; Still the same thing – Chad Oct 13 '15 at 17:54
  • 1
    I don't know what the problem is, but I got it working by not using a ``. I put the whole stylesheet inline in the frame with `' – Mr Lister Oct 13 '15 at 18:40
  • Thank you for the help, pointing out the head issue lead me in the right direction. I was trying to use the tips here to print to an iframe. http://stackoverflow.com/questions/1071962/how-to-print-part-of-rendered-html-page-in-javascript What I eventually went with was hiding all of the content on the page but the one div I needed to print from and adding a css file for media="print". Again, thank you for the help. – Chad Oct 13 '15 at 18:52

0 Answers0