window.print(); does not work in Safari

Question

The print method does not work on window when using an onclick link Safari. What is the alternative to have a webpage print, in safari via onclick code that is placed on a button? Another odd behavior that's occurring is that when I try and close the window, the print dialog native to the browser then appears.

Duplicate: http://stackoverflow.com/questions/23626998/safari-print-issue-with-javascript-window-print — HaukurHaf, Jul 01 '15 at 20:33
Its not the print method, its the on click function that does not work in safari — ODelibalta, Jul 01 '15 at 20:35
Put a console log in the onclick function instead so you can see whether the function is firing at all or not. — ODelibalta, Jul 01 '15 at 20:37
I took out the onclick attribute and put it in `ng-click="printOut()"` it still doesn't work — fauverism, Jul 01 '15 at 20:45
Hey, man. Have you solved this problem? I'm facing the same behavior right now. — ChernikovP, Jun 03 '16 at 15:33
Not sure what OS is being used. Safari was discontinued for Windows with Safari 6 (2012). — Alan Larimer, Oct 02 '17 at 15:05

score 6 · Accepted Answer · answered Sep 16 '19 at 12:47

6

Try this solution:

try {
  // Print for Safari browser
  document.execCommand('print', false, null)
} catch {
  window.print()
}

answered Sep 16 '19 at 12:47

Alex Golovin

232
3
6

This try catch statement did not run for me but the `document.execCommand` does work in Safari. I rewrote this to check for the browser and conditionally run each statement. – rosalynnas Jul 31 '20 at 20:30
This will silently fail for Firefox 94 without throwing any error. – Drew Nov 22 '21 at 17:54
[execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) is deprecated as of today. – kissu Apr 25 '22 at 02:36
(2022 July 26): Does not work. 50% opens op the small white print window which then results in an empty document – DavidDunham Jul 26 '22 at 08:01

score 2 · Answer 2 · answered Jan 09 '18 at 09:24

I was facing a similar issue with the Safari browser (and not any others). In my case, aborting all API calls currently in progress immidiately showed the native print dialog.

I'm guessing the reason why your dialog showed up when trying to close the tab/page is that all the network requests are cancelled then.

Here's an example of how to create a pool of ajax requests (when using jQuery): Stop all active ajax requests in jQuery

Also, to make it work consistently, I had to wrap the $.xhrPool.abortAll function in a short timeout (100ms).

My click handler function (simplified) looks something like this:

function myFunction() {
    window.print();
    window.setTimeout(function () {
        $.xhrPool.abortAll()
    }, 100);
}

score 1 · Answer 3 · answered May 26 '21 at 16:28

If you return the result of window.print() to the onclick handler, Safari will not display the print window. I use React and had to make the following change:

//code that does not work:
<button type="button" onClick={() => window.print()}>Print!</button>

//code that does work:
<button type="button" onClick={() => { window.print(); }}>Print!</button>

All other browsers I tested (except Safari on iOS) worked fine either way, such as Chrome on iOS or Chrome for desktop.

My best guess is that as window.print is known to be asynchronous in Safari, perhaps window.print() returns falsy to the onclick handler, which cancels any "popups" from being displayed. This may be why the sample above with the myFunction() code may work when having onclick="window.print()" may not work.

score 1 · Answer 4 · answered Jun 30 '22 at 15:26

1

This currently works in Firefox, Chrome and Safari:

try {
  if(!document.execCommand('print', false, null)) {
    window.print()
  }
} catch {
  window.print()
}

answered Jun 30 '22 at 15:26

Janek Dijkstra

11
2

score 0 · Answer 5 · answered Jun 14 '22 at 08:15

            var frame1 = document.createElement('iframe');
            frame1.name = "frame3";
            frame1.style.position = "absolute";
            frame1.style.top = "-1000000px";
            document.body.appendChild(frame1);
            var mywindow = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.documentElement ? frame1.contentDocument.documentElement : frame1.contentDocument;
            mywindow.document.open();
            mywindow.document.write('<html><head><title>' + strTitle + '</title>');
            mywindow.document.write('</head><body>');
            mywindow.document.write(data);
            mywindow.document.write('</body></html>');
            mywindow.document.close(); // necessary for IE >= 10
            setTimeout(function () {
                window.frames["frame3"].focus(); // necessary for IE >= 10
                window.frames["frame3"].print(); // necessary for IE >= 10
            }, 500);
            setTimeout(function () {
               document.body.removeChild(frame1);
            }, 20000);

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jun 14 '22 at 17:52

score -2 · Answer 6 · answered Dec 26 '17 at 00:34

Have no problem with window.print() with Safari. Sorry I could not try on Windows OS but follow code works for me with MacOS:

<!DOCTYPE html>
<html>
<body>
  <button onclick="myFunction()">Click me</button>
  <a href="#" onclick="myFunction()">Click link</a>

  <script>
    function myFunction() {
      window.print();
    }
  </script>

</body>
</html>

window.print(); does not work in Safari

6 Answers6

Linked