I am aware of two ways of calling the "print" dialog of browser (I used the Search, of course):

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

What is the difference between them? Support across browsers? Papers, docs or standards? Which is more correct thing to use?

Another question: what is the most straight way to print given part of a webpage? I know we can create new window or iframe to call any of two print methods above. Which one has less pitfalls?

I am aware of two ways of calling the "print" dialog of browser (I used the Search, of course):

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

What is the difference between them? Support across browsers? Papers, docs or standards? Which is more correct thing to use?

Another question: what is the most straight way to print given part of a webpage? I know we can create new window or iframe to call any of two print methods above. Which one has less pitfalls?

• javascript
• html
• web
• printing

• 1 In most cases, you would use document.print(). Check out the documentation for document.execCommand here: developer.mozilla.org/en-US/docs/Web/API/document.execCommand – Harvey A. Ramer Commented Jan 22, 2014 at 14:42
• 1 @HarveyA.Ramer that link does not document any print command. – user663031 Commented Feb 3, 2016 at 11:46
• @torazaburo Here's a great round-up of printing possibilities from GitHub that does include execCommand('print') examples: gist.github.com/Rast1234/8598949 It looks like that uses this jQuery plugin: github.com/jasonday/printThis – Harvey A. Ramer Commented Feb 3, 2016 at 14:37

3 Answers 3

I've tested different ways of printing part of webpage across browsers: Chrome, Firefox, Opera (12 and new), IE11, 10, 9 and 8. I've tried to create new window, new iframe, or use existing iframe on the page. And then tried .print() and .execCommand('print').

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

Code used for testing can be found here

Correct me if my testing code is wrong, I just wanted to find the clearest way to do the job. My conclusions:

• Opera 12 can not print part of a webpage (?)
• IEs don't print() iframes and windows, except current window.
• Calling print() on documents inside iframes or created windows in IEs breaks the print() on current document. Be careful!
• jQuery plugin printThis uses tricks for IE 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). It's not supported by Firefox though.
• execCommand() returns false if call was unsuccessful, so if you don't want to use plugins and magic tricks, create window or iframe, call execCommand('print') and if it returns false, call print().

One more thing:

Creating an iframe is tricky: you can't access its window or document directly (yes, you have ContentDocument property, which behaves differently across browsers). You should name it and then call window.frames[name] to get window object from that iframe. Do not try to call window.frames(id) - it will return the iframe.

That last method mentioned in the accepted answer, then, ends up looking 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();
}

You can use the 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 a part of my document you can do same for your frame replace the writting in a new Window by the property "src" for the body