'Nuxt/Vue Printing in Safari

Calling window.print() in a function fails to bring up the Safari native print window. This does however work in Chrome.

I've tried:

  • Attempting to follow this link causes nothing to happen when the button is tapped. Is there a special way I need to attach this to a button in Nuxt/Vue?
  • Using document.execCommand('print', false, null) occasionally works but 90% of the time will show a 100+ page document with no content in the print dialog.

macOS 12.3, Safari 15.4, Nuxt 2.15.7

javascripthtmlvue.jssafarinuxt.js


Solution 1:[1]

There seems to be two problems going on here:

  1. Calling window.print() in Nuxt does not bring up the Safari print window.
  2. Safari displays the correct print window only the first time, then just a bunch of blank pages. This does not seem to be limited to Nuxt, though (example).

As for the first problem, I found this bug report that an active EventSource prevents Safari from displaying the print window. So i thought hmmm, maybe the Nuxt dev server is somehow using this to communicate with the client. So I tried running my app in production mode (nuxt build && nuxt start) and voilà, this made my Safari print window appear as expected.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jengstro

Related Questions