Print function is not working properly on chrome - javascript

I'm trying to print a section of the page which a form with values. I'm using window.print();
It's working perfectly fine in Mozilla, but in Chrome and Edge it has problems.
The problem is, in the beginning it prints the whole page, and second time it prints the desired section. 3rd time again full page and 4th time again the section. What's wrong?
How I see it in Mozilla
How I see it in chrome
var printContents = document.getElementById('form-sectionResilience2').innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents; // I need to add this line to return page to its orginal position

Related

Button click not working after document is printed javascript

I have a div that contains text to be printed on external printers.
<div id="school">
<p>Who loves school?</p>
<img onClick=clickMe(1) src='clickImage.png' />
</div>
Below is the javascript that handles the click of the above image button and initiates a printing dialog,
function clickMe(id) {
const printContents = document.getElementById(id).innerHTML;
const originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
The above javascript prints the div successfully, but with only 1 problem. After the print dialog exits, the image button stops responding to clicks until the page is refreshed.
Ideal behavior would be the button responding on each click without the need to refresh the page.
What am I missing?

Print event in angular

I am creating a project using angular. In my application i need to print the specific area of page. I know we can achieve this using media css but this is creating problem for me beacuse of lot of print functionalities are in the project. I am trying to below the method
#HostListener('window:keydown.control.p', ['$event'])
showPinned(event: KeyboardEvent) {
event.preventDefault();
var myDiv = document.getElementById("modal").innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML =
"<html><head><title></title></head><body>" +
myDiv + "</body>";
window.print();
document.body.innerHTML = oldPage
}
But when user cancel or confirm then all the events stopped working on application
Well, you replaced the generated html. But all the event handlers are gone. This makes sense for generating a page for print, but not not restore a fully working page. Either you reload the page or you generate the content for print in a different way. For example by creating a separated document instead of manipulating the existing one.

Uncaught TypeError: window.reload is not a function

I am trying to print an image from inside a div, the code runs ok but when the print dialog pops up, I would like the page to stay the same while actually it is showing only the picture as the window.reload doesn't work for some reasons. The javascript is telling me in console "Uncaught TypeError: window.reload is not a function"but i don't understand why.
function printDiv(printableArea) {
var printContents = document.getElementById("printableArea").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
window.close();
window.reload();
}
Click to print
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
The reason you are getting the error is that there is no window.reload() method. You might want to use location.reload() to reload the page instead.
Not sure if there's such function, Try location.reload()
details
use location.reload(); or window.location.reload(true);
https://webplatform.github.io/docs/apis/location/reload/

Javascript to print div inside external html page

Hello I am using the following javascript code to print a div layer from a webpage. Is there a way that this can be modified to print this div from from another page (for example print.php) not the one that is open in the moment ?
<script>function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
} </script>
and the link to make it work is: <a href="#" onclick="printDiv('printableArea')">
I think you are asking whether it's possible to print a DIV in another page.
If this is the question ,it is possible given these two page have some relation,so that the other page can get reference of the content page.
For example , print.php opens the content page by using window.open. Or , print.php is the parent page of the content page.

Window.Print() Not working in FF3

I am trying to print a portion of the page in FF3. This works fine in IE7. In FF, the page correctly changes to the part I am trying to print, but the Print Dialog never appears. Here is my code:
function PrintPage() {
var fullPage = document.body.innerHTML;
document.body.innerHTML = document.getElementById('content').innerHTML;
document.focus();
window.print();
document.body.innerHTML= fullPage;
}
What am I doing wrong here ?
document.focus doesn't exist in FF. I suppose your code blows up with a TypeError when calling document.focus, right before window.print. Does print dialog appear if you remove conflicting statement?

Categories