Help making page refresh after print (print.js)

JavaScript
1

Hi guys, I am with an extreme dificulty to make this work.
I have a div with printMe id, and it is printing fine. What I need is to make the page refresh after printing using this JavaScript code.
To reference, this code is called by a button on my index.html page.

document.getElementById("doPrint").addEventListener("click", function() {
     var printContents = document.getElementById('printMe').innerHTML;
     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
});

I hope you guys can help me make this work, I’m n00b at most coding JS. This code I got on the web.

2

I’m not sure this is the best way to go about this. It looks like you only want the content in #printMe to be printed. One way to do this would be to use a CSS @media print query to hide everything except #printMe for printing. This is what I would recommend if possible.

Another option would be to use the beforeprint and afterprint events to modify and restore the page before/after printing.

A third option would be to create and open a new window that just includes the content in #printMe and then have that window call window.print() once it loads.

But the CSS method is definitely the easiest.

3

Actually, the CSS method only make the same example to print, but I think will make it impossible to refresh after print, right?
How can I modify the JS to make this new window? but my code is n00b made and even if I cancel de print, I cannot change the products and even clear them, it simply doesn’t work, so I hoped i could make it refresh.
I believe the line “document.body.innerHTML = originalContents;” return the page to original page, so if i change it to refresh the page after return I think will work like i need.

4

That’s the nice thing about about the CSS method, you don’t have to do a refresh after print because you don’t have to change anything on the page, you don’t need to use JS at all. The browser will automatically use the CSS print media query to apply those styles only when it is printing, so you only need to use CSS to hide the elements that shouldn’t be printed.

5

Good, I have tested and works, but that way I lost my other CSS configuration on class, as I have to modify to noPrint all the div classes I don’t want to print, and its a lot. And even so, for me didn’t work 'cause my print it’s a thermal printer, and for some reason this way the print was horrible, like it was low on ink (even being thermal), that on JS I have a clear print, as it remove any css configuration and send it like text to printer.
Theres no way for me to refresh it after print with JS?

EDIT

I have made it. I was typing window.reload(); , and I needed window.location.reload(true); but I simply was unaware, found it on page 20 on google :smiling_face_with_tear:
Thanks!

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.