Wait for window.onbeforeprint to finish DOM manipulation before print preview

Viewed 247

According to the official docs window.onbeforeprint allow[s] pages to change their content before printing starts (perhaps to remove a banner, for example).

However, this doesn’t work in my cases, since window.onbeforeprint is fired asynchronously — like any event in JS. I do change the DOM content in my event handler, but the changes are not in the print preview. Only, when I cancel the first print attempt and hit Cmd+P again, the changes (of the first event) inside the DOM are part of the print preview.

I’m not talking about long-running processes here like fetching something from the net. Just simple copy/paste inside the DOM.

So I wonder if I’m doing anything wrong here, or if window.onbeforeprint is pretty much pointless for changing content prior to printing.

1 Answers

After some additional troubleshooting, I can confirm, that window.onbeforeprint actually allows DOM manipulations to happen before the print view is generated. The problem in my case was the framework: Vue.js. The Vue component didn’t update in time. If I manipulate the DOM directly inside the event handler, it works.

Related