How to convert an html report to a downloadable pdf
- Step 1Save the rendered report as HTML — From the dashboard, use File → Save Page As → Webpage, HTML Only after the report has fully loaded, or use the tool's 'Export HTML' if it has one. Save it as a
.htmlfile. - Step 2Open the converter and drop the file — Load it into the HTML to PDF converter. Parsing is local — report data is never uploaded. Input is file upload only; there's no live-URL fetch.
- Step 3Let it extract text and drop the visuals — Styles and scripts are removed; tags (including
<svg>/<canvas>/<table>) become line breaks. Charts leave nothing behind; tables flatten to lines. Output is 10pt Helvetica on US-Letter — no page-size control. - Step 4Export charts separately as images — Before converting, export each chart to PNG (most chart libraries and BI tools offer 'Download as image'). You'll add those visuals to a separate image-based PDF, since this tool can't render them.
- Step 5Download the text report — The PDF generates in-page and downloads to your device — the narrative, figures, and footnotes in a tidy, paginated document.
- Step 6Assemble the full report pack — Combine the chart PNGs into a PDF with image-to-pdf, then merge that with this text PDF using pdf-merge to deliver one report with both narrative and visuals.
Report element → what you get
How a dashboard/report's pieces fare through text extraction.
| Report element | In the PDF? | What to do instead |
|---|---|---|
| Executive summary / narrative | Kept | Nothing — this is the strength of the tool. |
| Figures quoted in prose ("up 12%") | Kept | Nothing — inline numbers survive. |
| SVG charts (Chart.js, D3, Highcharts) | Empty — no text | Export chart as PNG → image-to-pdf. |
| Canvas charts | Empty — no text | Export canvas to PNG before converting. |
Data tables (<table>) | Flattened to lines | Keep tabular data in CSV/Excel, or screenshot the table. |
| KPI cards / styled tiles | Text kept, styling lost | The numbers survive as plain lines; the card design does not. |
| Images / company logo | Discarded | Screenshot, then image-to-pdf. |
| @page header/footer CSS | No effect | CSS is stripped; add page numbers later with pdf-page-numbers. |
Building a complete report pack
Combine this tool with siblings to deliver narrative + visuals in one PDF.
| Step | Tool | Output |
|---|---|---|
| 1. Narrative & figures | html-to-pdf (this tool) | text.pdf |
| 2. Charts as images | Export PNG → image-to-pdf | charts.pdf |
| 3. Combine | pdf-merge | report.pdf |
| 4. Add page numbers | pdf-page-numbers | final.pdf |
Cookbook
Report-export recipes. 'Before' is the report HTML; 'after' is the PDF text.
A summary with figures-in-text — clean export
When the key numbers live in sentences and captions, the export is excellent. The narrative and the figures come through verbatim.
Before (report HTML): <h2>Q2 Performance</h2> <p>MRR grew to $altered to $128k (+12% QoQ).</p> <p>Net revenue retention held at 104%.</p> After (PDF text): Q2 Performance MRR grew to $128k (+12% QoQ). Net revenue retention held at 104%.
An SVG chart leaves a hole
Chart libraries render to SVG or canvas — neither contains drawable text for this tool, so the chart simply vanishes. Only the surrounding caption survives.
Before (report HTML): <figure> <svg id="chart">...250 path elements...</svg> <figcaption>Revenue by month</figcaption> </figure> After (PDF text): Revenue by month (the chart itself produces no text — only the caption remains)
A data table collapses — keep data structured elsewhere
A results table flattens to one line per cell, which is unreadable for analysis. Export the underlying data as CSV/Excel instead, or screenshot the rendered table.
Before: <table><tr><td>Region</td><td>Sales</td></tr> <tr><td>EMEA</td><td>412</td></tr> <tr><td>APAC</td><td>388</td></tr></table> After (PDF text): Region Sales EMEA 412 APAC 388
KPI tiles keep numbers, lose the design
Big-number KPI cards become plain text lines. The figures survive (useful), but the visual emphasis is gone.
Before: <div class="kpi"><span class="value">1,204</span><span>New signups</span></div> After (PDF text): 1,204 New signups
Full pack: narrative PDF + charts PDF merged
Deliver one report with both. Export charts to PNG → image-to-pdf, convert the narrative here, then merge and number the pages.
text.pdf (this tool: narrative + figures)
charts.pdf (chart PNGs → image-to-pdf)
└ pdf-merge → report.pdf
└ pdf-page-numbers → final.pdf (ready to distribute)Edge cases and what actually happens
SVG charts are missing from the PDF
Empty resultSVG chart elements contain no drawable text for this tool, so they don't appear. Export each chart as PNG and use image-to-pdf, then merge.
Canvas charts don't render
Empty resultCanvas is a pixel surface with no text content; the converter draws text only, so canvas charts produce nothing. Export the canvas to PNG before converting.
The report is rendered live by JavaScript
Empty resultScripts are stripped and never run, so a dashboard that builds its DOM at runtime yields a blank PDF unless you saved the fully-rendered HTML. Save the page after it loads completely.
Data tables become unreadable
FlattenedTables collapse to one line per cell. For analysis, keep the data in CSV/Excel; for a visual record, screenshot the table and use image-to-pdf.
You set @page headers/footers in CSS
No effectCSS is discarded, so @page rules don't apply. Generate the PDF, then add running page numbers with pdf-page-numbers.
Wide table rows or long figures get cut
TruncatedLines clip at 100 characters with no wrap, so a long flattened table row or a wide formula loses its tail. Trim or pre-wrap the source.
Report contains currency/■ symbols or accents
Render errorHelvetica is Latin-1; the euro sign, many currency glyphs, and accented characters can't render and may error or drop. Capture those sections as images via image-to-pdf.
Saved dashboard HTML exceeds 2 MB
413 blockedDashboards with inline data or base64 chart images blow past the free 2 MB cap quickly. Strip inline assets, or upgrade to Pro (50 MB).
Frequently asked questions
Will SVG charts render correctly in the PDF?
No. SVG chart elements carry no drawable text for this tool, so they don't appear at all. Export each chart as a PNG and combine them with image-to-pdf, then merge with the text PDF using pdf-merge.
What about canvas-based charts?
Canvas charts also don't render — canvas is a pixel surface with no text content, and this tool draws text only. Export the canvas to PNG before converting, then add it as an image.
Can I add a header and footer to the PDF automatically?
Not via CSS — @page rules are stripped along with all CSS. Generate the PDF here, then stamp running page numbers with pdf-page-numbers.
Do data tables keep their rows and columns?
No. Tables flatten to one line per cell in reading order, which is unreadable for analysis. Keep tabular data in CSV/Excel, or screenshot the rendered table and use image-to-pdf.
Why is my report nearly blank after conversion?
Most likely the dashboard renders its content with JavaScript, which is stripped and never executed here. Save the page as HTML after it fully loads, or use the browser's Print → Save as PDF which runs the page.
Can I make this an automatic 'Download PDF' in my web app?
This is a manual, browser-side tool, not an embeddable export. For an in-app 'Download PDF' that preserves charts, render server-side with a headless browser (Puppeteer/Playwright). This tool is best for ad-hoc text exports.
Will the company logo and styling appear?
No. Images and CSS are stripped — output is plain 10pt Helvetica text. For branded visuals, screenshot the report and use image-to-pdf.
Is the report data uploaded anywhere?
No. Everything runs in your browser via pdf-lib, so confidential KPIs and financials stay on your device. Only anonymous usage counts are recorded when signed in.
Can I set the report to A4 instead of Letter?
Not in this tool — output is always US-Letter. Convert here, then change the page size with pdf-resize if you need A4.
Why do some long rows get cut off?
Lines are truncated at 100 characters with no word-wrap. Flattened wide table rows and long figures lose their ends. Trim or pre-wrap the source HTML.
How do I deliver one PDF with both text and charts?
Convert the narrative here, export charts to PNG and run them through image-to-pdf, then combine both with pdf-merge and number with pdf-page-numbers.
What's the largest report I can convert for free?
Up to 2 MB per file on the free tier, one at a time. Pro raises the cap to 50 MB and allows 5-file batches for multi-section report packs.
Privacy first
All PDF processing runs locally in your browser using PDF-lib and pdf.js. No file is ever uploaded — only metadata counters are saved for signed-in dashboard stats.