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:

well the print function lives in the parent window not the new window. why would you open a window and than open another window to print it? — epascarello
– epascarello, Commented Nov 27, 2018 at 14:47

Nikita Seliverstov · Accepted Answer · 2018-11-27 15:05:27Z

1

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>

edited Nov 27, 2018 at 15:05

answered Nov 27, 2018 at 14:54

Nikita Seliverstov

1752 silver badges11 bronze badges

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

3 Comments

ashwin karki Over a year ago

says me error like " Cannot read property 'innerHTML' of null at PrintMe (<anonymous>:7:59) at HTMLButtonElement.onclick"

ashwin karki Over a year ago

but when the print dialog box appers then in that paper only date and My title is shown rather i need "Print the content of this div content in new window." letter there

ashwin karki Over a year ago

the letter inside <div> must appear there as i am only getting blank paper there :(

mike510a · Accepted Answer · 2018-11-27 14:59:20Z

0

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>

answered Nov 27, 2018 at 14:59

mike510a

2,1881 gold badge15 silver badges29 bronze badges

1 Comment

ashwin karki Over a year ago

can i exclude the Print button it is showing me in that print section

Collectives™ on Stack Overflow

Print button not working on javascript to print the content of page

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related