jQuery Print function to print div content with css

Question

I've this function for my Wordpress plugin uses jQuery that prints the content from the div with class "table_disp". How can I print the css style along with it.

function pop_print(){
    w=window.open(null, 'Print_Page', 'scrollbars=yes');        
    w.document.write(jQuery('.table_disp').html());
    w.document.close();
    w.print();
}

Any idea?

Should I use something like this.. w.document.write(jQuery('.table_disp').css('color','#999999').html()); — Gurjot Bhatti
– Gurjot Bhatti, Commented Jul 19, 2013 at 18:59

Diodeus - James MacFarlane · Accepted Answer · 2013-07-19 18:59:48Z

11

You need to include the SAME stylesheet you're using in the parent page within the pop-up. You may want to make a dummy page stub/wrapper that has your stylesheet in it, then inject your HTML.

var myStyle = '<link rel="stylesheet" href="http://mysite.com/mystyle.css" />';
w.document.write(myStyle + jQuery('.table_disp').html());

edited Jul 19, 2013 at 18:59

answered Jul 19, 2013 at 18:54

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

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

2 Comments

Gurjot Bhatti Over a year ago

Can you please elaborate it with an example using my function.

Gurjot Bhatti Over a year ago

It might have been useful if it was a regular website. Since I'm using WordPress its different to enqueue the stylesheet. If I do like this, it just re-directs me to another page that doesn't exist. :(

Nisarg Patel · Accepted Answer · 2014-05-08 10:58:36Z

4

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

function Popup(data) {
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title></title>');
    mywindow.document.write('<link rel="stylesheet" href="http://www.test.com/style.css" type="text/css" />');  
    mywindow.document.write('<style type="text/css">.test { color:red; } </style></head><body>');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');
    mywindow.document.close();
    mywindow.print();                        
}

<a href="#" id="hrefPrint" onclick="PrintElem('.print_div')">Print</a>

answered May 8, 2014 at 10:58

Nisarg Patel

2601 silver badge8 bronze badges

Comments

Gisheri · Accepted Answer · 2014-02-25 18:47:21Z

1

if you can add a plugin, the Jquery printThis plugin works great (since you're already using jQuery), and does exactly what you need. http://plugins.jquery.com/printThis/

It makes an iframe and uses your page css plus allows for an additional css file specifically for printing, along with other things

answered Feb 25, 2014 at 18:47

Gisheri

1,7154 gold badges19 silver badges28 bronze badges

Comments

Aftab Ahmed · Accepted Answer · 2018-09-23 06:22:01Z

0

Append Stylesheet instead

var css= '<link rel="stylesheet" href="/css/print.css" />';
            var printContent = document.getElementById("printContentID");

            var WinPrint = window.open('', '', 'width=900,height=650');
            WinPrint.document.write(printContent.innerHTML);
            WinPrint.document.head.innerHTML = css;
            WinPrint.document.close();
            WinPrint.focus();
            WinPrint.print();
            WinPrint.close();

answered Sep 23, 2018 at 6:22

Aftab Ahmed

93512 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery Print function to print div content with css

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related