Print button not working on javascript to print the content of page
Question
I tried the code(it is not running in snippet properly) or you can directly copy paste and run on text editor.If it can be changed with jquery suggest me.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script language="javascript">
function PrintMe(DivID) {
alert("here");
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById(DivID).innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
docprint.document.write('<head><title>My Title</title>');
docprint.document.write('<style type="text/css">body{ margin:0px;');
docprint.document.write('font-family:verdana,Arial;color:#000;');
docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
docprint.document.write('a{color:#000;text-decoration:none;} </style>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
</script>
<style type="text/css">
.hidden {
display: none;
}
</style>
<body>
<script>
var myWindow;
function openWin(DivID) {
var content_print=document.getElementById(DivID).innerHTML;
myWindow = window.open("", "myWindow", "width=1000,height=1000");
myWindow.document.write(content_print);
}
function closeWin() {
myWindow.close();
}
</script>
<div id="divid" class="hidden">
Print the content of this div content in new window.
<button type="button" onclick="PrintMe('divid')">Print</button>
</div>
<button onclick="openWin('divid')">Submit</button>
<button onclick="closeWin()">Close</button>
</body>
</html>
At first my normal page loads:
When i click submit button then the new window opens with the content of id="divid" .It appears as:
It is showing me error like:
2 answers
solution1
1 ACCPTED 2018-11-27 14:54:24
It happens because pop up window is a new unique document, and it know's nothing about code on your original page. You need to add your function to a your new window. if you add script to a div which you use to generate new window you should be fine but it'not a best way to print things consider using function print()
<div id="divid" class="hidden">
<script language="javascript">
function PrintMe(DivID) {
alert("here");
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById(DivID).innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
docprint.document.write('<head><title>My Title</title>');
docprint.document.write('<style type="text/css">body{ margin:0px;');
docprint.document.write('font-family:verdana,Arial;color:#000;');
docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
docprint.document.write('a{color:#000;text-decoration:none;} </style>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
</script>
Print the content of this div content in new window.
<button type="button" onclick="PrintMe('divid')">Print</button>
</div>
solution2
0 2018-11-27 14:59:20
This will probably solve your problem: You can get rid of the printMe() function all together or pass the printMe() function to MyWindow via a function that is written to the MyWindow document.
<script>
var myWindow;
function openWin(DivID) {
var content_print=document.getElementById(DivID).innerHTML;
myWindow = window.open("", "myWindow", "width=1000,height=1000");
myWindow.document.write(content_print);
//print the window
myWindow.print();
}
function closeWin() {
myWindow.close();
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.