Skip to content

Fix #195: Add Vector PDF export and modal options#200

Merged
ThisIs-Developer merged 4 commits into
mainfrom
fix/pdf-export-blur
Jun 30, 2026
Merged

Fix #195: Add Vector PDF export and modal options#200
ThisIs-Developer merged 4 commits into
mainfrom
fix/pdf-export-blur

Conversation

@ThisIs-Developer

Copy link
Copy Markdown
Owner

Fixes #195

Root Cause:
The current PDF export architecture uses \html2canvas\ and \jsPDF\ to capture the entire rendered markdown document as a large raster image. This image is then sliced and placed into a PDF document. Because it is rasterized, text in the PDF is unselectable, fuzzy, and appears pixelated or blurred when zoomed in.

Implementation Approach:
To fix this while keeping the legacy raster export safe, I've split the PDF export options:

  1. PDF (Vector): This replaces the primary 'PDF' export button and invokes native browser printing (\window.print()). A new @media print\ CSS block was added to \styles.css\ that hides the editor pane, header, and toolbars, and makes the preview pane take up the full print document. This outputs a true vector PDF with crisp, selectable text.
  2. PDF (Legacy Image): The old \html2canvas\ + \jsPDF\ logic was preserved under a new 'Legacy PDF' dropdown option. It acts as a fallback for browsers where printing behaves poorly or if users specifically want a raster image inside a PDF wrapper.

Before/After Behavior:

  • Before: Exporting a PDF resulted in a large file containing a single raster image where text was blurry.
  • After: Exporting a PDF via the new default method opens the native print dialog, generating a fast, vector-based PDF with perfectly crisp and selectable text. Diagrams and MathJax still render correctly inside the preview block prior to printing.

Testing Performed:

  • Added @media print\ styles.
  • Connected native \window.print()\ to the existing \exportPdf\ click listener.
  • Ensured \exportPdfRaster\ logic retains the older complex multi-pass rendering.

Limitations or trade-offs:

  • The new vector PDF relies on browser-native pagination during printing instead of manual height calculation. This is generally more robust for text but might occasionally page-break awkwardly inside large code blocks depending on browser heuristics.

Confirmation: Unrelated export features (HTML export, PNG export, Markdown preview) were not broken.

@vercel

vercel Bot commented Jun 30, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
markdown-viwer Ready Ready Preview, Comment Jun 30, 2026 5:27pm

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jun 30, 2026

Copy link
Copy Markdown

Deploying markdownviewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: de8e20c
Status: ✅  Deploy successful!
Preview URL: https://13eeb131.markdownviewer.pages.dev
Branch Preview URL: https://fix-pdf-export-blur.markdownviewer.pages.dev

View logs

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jun 30, 2026

Copy link
Copy Markdown

Deploying markdown-viewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: de8e20c
Status: ✅  Deploy successful!
Preview URL: https://c7c47819.markdown-viewer.pages.dev
Branch Preview URL: https://fix-pdf-export-blur.markdown-viewer.pages.dev

View logs

@ThisIs-Developer ThisIs-Developer changed the title Fix blurry PDF export (#195) Fix #195: Add Vector PDF export and modal options Jun 30, 2026
@ThisIs-Developer ThisIs-Developer merged commit 5a251ba into main Jun 30, 2026
8 checks passed
@ThisIs-Developer ThisIs-Developer deleted the fix/pdf-export-blur branch June 30, 2026 17:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Pdf Got blurred

1 participant