fix(pdf): generate the PDF in-browser — identical on every device - #2
Merged
Conversation
…evice Stop using window.print(): each browser's print engine paginates differently (iOS WebKit ignores @page margin:0 and inserts blank sheets; desktop Chrome needs "Background graphics" enabled; pages looked half-empty after the iOS workarounds). That whack-a-mole can't satisfy desktop and iOS at once. Instead we render each laid-out A4 page to an image (html2canvas-pro) and place one per A4 sheet in a jsPDF. Output is identical on desktop Chrome, iPhone Safari/Chrome and Android, full-page frames and backgrounds always included, and the biodata still never leaves the browser (libs are lazy-loaded on click). - src/lib/pdf.ts: downloadBiodataPdf() — captures #print-area's .a4 pages. onclone resets the preview's CSS scale transform so capture is at true A4 size on every device (mobile previously squished). - create page: Download PDF now calls the generator (with a "Preparing…" state) and names the file from the person's name. - Revert the iOS-specific print workarounds (page-height budget, print min-height override) now that we don't depend on the print engine — pages are full A4 again on screen and in the PDF. - Tests: mocked unit tests for the page-iteration logic (37 total). Verified: headless downloads on desktop + mobile emulation produce byte- identical 2-page PDFs (traditional + floral), full frames intact. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
We kept patching individual browser print-engine quirks (iOS WebKit ignores
@page { margin: 0 }and inserts blank sheets; desktop Chrome needs Background graphics on; the iOS height-budget made desktop pages look half-empty). Desktop and iOS want opposite things, sowindow.print()can't satisfy both.What
Render the PDF ourselves in the browser: capture each already-laid-out
.a4page to an image (html2canvas-pro) and place one per A4 sheet in ajsPDF. The output is byte-identical on desktop Chrome, iPhone Safari/Chrome and Android — full-page frames and backgrounds always included — and the biodata still never leaves the browser (libs are lazy-loaded on click).Key detail
The preview scales the document down with a CSS
transform(heavily on mobile). Capturing under that transform squished the layout, sooncloneresets the transform → every device captures at true A4 size.Changes
src/lib/pdf.ts—downloadBiodataPdf();+unit tests (mocked libs).min-heightoverride) now that the print engine is out of the loop — pages are full A4 again on screen and in the PDF.Verification
npm run lintclean ·npm test37/37 ·next buildgreen.🤖 Generated with Claude Code