Printing a web page (part) using Javascript

Question

I am aware of two methods for invoking the browser print dialog box (of course, I used Search):

• document.print ()
• document.execCommand ('print', false, null)

What is the difference between the two? Browser support? Documents, documents or standards? Which is more correct to use?

Another question: what is the most direct way to print this part of a web page? I know that we can create a new window or iframe to call either of the two printing methods above. Who has fewer traps?

Answer 1

I tested various ways to print part of a web page in browsers: Chrome, Firefox, Opera (12 and new), IE11, 10, 9 and 8. I tried to create a new window , a new iframe or use an existing iframe on the page. And then they tried .print() and .execCommand('print') .

Note. Keep in mind that .print () is called in a window , and .execCommand () is called in the document .

The code used for testing can be found here.

Correct me if my test code is incorrect, I just wanted to find the clearest way to do this work. My findings:

• Opera 12 cannot print part of a web page (?)
• IEs do not print() iframes and windows other than the current window.
• Calling print() on documents inside an iframe or created windows in IE splits print() into the current document . Be careful!
• The jQuery printThis plugin uses IE tricks to do the job, and it just works. The only exception is Opera 12. By the way, this plugin uses print() .
• execCommand('print') works almost everywhere and with any approach (iframes, window). However, it is not supported by Firefox.
• execCommand() returns false if the call failed, so if you don't want to use plugins and magic tricks, create a window or iframe, call execCommand('print') , and if it returns false , call print() .

One more thing:

Creating an iframe difficult: you cannot access its window or document directly (yes, you have a ContentDocument property that behaves differently in browsers). You must name and then call window.frames[name] to get the window object from this iframe. Do not try to call window.frames(id) - it will return an iframe .

Answer 2

The last method mentioned in the accepted answer, as a result, looks like this:

 iframe = document.getElementById('iframe-id'); var printed = iframe.contentWindow.document.execCommand('print', false, null); if (!printed) window.print(); 

alternative:

 try { iframe = document.getElementById('iframe-id'); iframe.contentWindow.document.execCommand('print', false, null); } catch(e) { window.print(); } 

similar method used by printThis

 if (document.queryCommandSupported("print")) { $iframe[0].contentWindow.print(); $iframe[0].contentWindow.document.execCommand("print", false, null); } else { $iframe[0].contentWindow.focus(); $iframe[0].contentWindow.print(); } 

Answer 3

You can use a combination of window.open and execComand (saveas Exemple:

 <script type= "text/javascript"> function saveas() { var oPrntWin = window.open("","_blank","width=1,height=1,left=1,top=1,menubar=yes,toolbar=yes,resizable=yes,location=no,scrollbars=yes"); oPrntWin.document.open(); oPrntWin.document.write(editeur.innerHTML); oPrntWin .document.execCommand("SaveAs",true,"C:\\My Documents\\Saved Content.html"); oPrntWin.document.close(); } </script> 

editeur.html is part of my document you can do the same for your frame replace the letter in a new window with the "src" property for the body