Javascript overwrites data on screen and refreshes page

Question

I have been working on a project that I just need to print the contents of a hidden div. The below solution works fine, but replaces the page contents with the div then calls the print of the window and then replaces the page with the original contents. This is fine, but when I click on the page after this or try to print again, the page refreshes.

Is there a way, without opening a new window to print the contents of a div and the page still be functional?

$scope.printDiv = function(printable) {
    var restorePage = document.body.innerHTML;
        var printContent = document.getElementById(printable).innerHTML;
        document.body.innerHTML = "<html><head><title></title></head><body>" +  printContent  + "</body>";
        window.print();
        document.body.innerHTML = restorePage;
    };

Put the id in double quotes; document.getElementById("printable").innerHTML; And how about this at line 4: document.body.innerHTML = printContent; — Gjermund Dahl, Jan 20 '16 at 20:48

score 0 · Answer 1 · answered Jan 20 '16 at 20:42

0

I had created a directive that did something much like this. It involves creating a new window, populating it with the HTML you want printed, printing that window, and then finally closing.

The code looks like the following:

$scope.printPage = function() {
    var pageToPrint = $window.open('', 'Print Page', 'width=800, height=600');
    pageToPrint.document.write(angular.element(pageHtml).html());
    pageToPrint.document.close();
    pageToPrint.focus();
    pageToPrint.print();
    pageToPrint.close();
}

This works in all of the browsers and cleanly closes everything out once the user finishes with the print dialog window.

answered Jan 20 '16 at 20:42

Matthew Green

10,161
4
36
54

I had done this same thing prior this morning and it was working with static data. Each hidden `div` has different information in it and it wasn't pulling in the different data. – Brandon Wilson Jan 20 '16 at 20:48
@BrandonWilson then it sounds like your question isn't 'how to print html' but 'how to get the correct html'. That's quite different than what you posted. You would need a whole new question with additional code for that. – Matthew Green Jan 20 '16 at 20:53

score 0 · Answer 2 · edited May 23 '17 at 10:27

See a similar question that I found: AJAX - Print Page Content

It seems the answer of Matt Razza is what You are looking for.

If you're trying to print invisible content you could use two different css files for the different media (screen vs print) where you hide/unhide the required content via display: none; and then spawn the print dialog via window.print().
<link rel="stylesheet" type="text/css" href="theme1.css" media="screen" />
<link rel="stylesheet" type="text/css" href="theme2.css" media="print" />
<div class="hidden_on_page">YOU CAN'T SEE ME BUT YOU CAN PRINT ME!</div>
<div class="on_page">YOU CAN SEE ME BUT YOU CAN'T PRINT ME</div>
Then in theme1.css:
.hidden_on_page { display: none; }
theme 2.css:
.on_page { display: none; }
And you would trigger the print dialog to spawn when required via:
window.print();

score 0 · Answer 3 · edited May 23 '17 at 12:30

0

You can do it with CSS: https://stackoverflow.com/a/356123/1516112

When the user click on your button, wrap your entire page inside a div using the .no-print class. Next add your content in another div next to the previous div. Call print() and restore your page. It should works.

edited May 23 '17 at 12:30

Community

1
1

answered Jan 20 '16 at 20:55

nikoskip

1,860
1
21
38

Javascript overwrites data on screen and refreshes page

3 Answers3