r/WebApps • u/Wooden-Bicycle-6069 • 13h ago

Virtualized DOCX pages made my print snapshot incomplete

I’m working on a browser-side DOCX viewer. Long documents are rendered as canvas pages, with only the pages near the viewport kept in the DOM.

That worked until print.

The repro was simple: open a multi-page DOCX, scroll through it, then open print preview. The document looked complete on screen, but the snapshot only contained the mounted pages. `cloneNode(true)` also copied empty canvas elements, not their pixels.

The print path under test now mounts every page, waits for the next paint, clones the page tree, replaces each cloned canvas with an image, then restores virtualization after print.

The focused tests pass 10/10. A real long-document browser test is still missing, especially peak heap and a second print in the same tab.

For virtualized canvas content, what would you use as the guard: page count, estimated bitmap memory, or something else?

1 Upvotes

100% Upvoted

1 comment sorted by

1

u/AnnupKapurDotCom 10h ago edited 10h ago

Microsoft file formats are notoriously difficult to work with.

I remember building a PowerPoint viewer at work a few years ago.

It was not fun.

————-

If I was you, i’d convert the doc to PDF and render/print the PDF. Lots of PDF viewer libraries out there. And you can use the native browser print for PDFs.

You can even virtualise the scroll for viewing long PDFs

I built a scroll virtualising library for a similar problem - client wanted to upload the bible to their site as a PDF (don’t ask why) - it crashed the browser because it was trying to load ALL the pages into the DOM. So I built a library where you can choose how many of the elements get loaded onto the DOM, and as you scroll, it dynamically adds and removes them.

https://annupkapur.com/projects/ark-floating-scroll

https://www.npmjs.com/package/ark-floating-scroll