Blog: Fixing the Analytics Export — From window.print() to a Real Download
Fixing the Analytics Export — From window.print() to a Real Download
Release v0.1.344 · UI/UX · Analytics Dashboard
The problem with printing your way to a PDF
The Analytics dashboard has always had a Download report button. What it actually did, until now, was call window.print() — the same browser API that lets you print a webpage on paper — dressed up with print-media CSS to hide the toolbar and make the output look report-like.
It worked, mostly, on one browser, on one desktop, once. In practice:
- Chrome, Safari, and Firefox all render print layouts differently. Fonts, spacing, page breaks, and colour profiles vary enough that the "same" report looked different depending on what browser a user happened to be in.
- It broke entirely on mobile. Mobile browsers either show a system print dialog with no real PDF output, or ignore the call altogether.
- PWA mode has no print pipeline. Users running the platform as an installed web app got nothing.
- The output couldn't be shared as a file. Browser-printed PDFs land in the OS print queue or a save dialog with no consistent file name, metadata, or formatting guarantees.
The CSS workarounds — hiding the toolbar, collapsing the nav, overriding colours for print media — were symptoms of the underlying issue: we were using the wrong tool for the job.
The right tool was already in the codebase
The platform already generates PDFs properly. Check-in reports, check-out reports, and deductions documents all go through @react-pdf/renderer, a React-based PDF generation library that produces consistent, predictable output regardless of browser or device.
The fix for the Analytics export was to use the same pipeline.
What changed in v0.1.344
A real server-side endpoint
A new /api/reports/analytics endpoint handles PDF generation on the server. Moving rendering to the server means:
- The output is identical for every user, on every device, every time.
- The client bundle isn't bloated with rendering logic.
- The file arrives as a proper binary download with a defined file name.
CSV as a first-class export
Not everyone needs a formatted PDF. For users who want to pull analytics data into a spreadsheet, a CSV export is now available through the platform's existing downloadCsv utility. It exports the KPI summary and trend data in a flat format ready for Excel, Google Sheets, or any data tool.
A loading state that tells you something is happening
Report generation takes a moment. The download button now enters a loading state while the server processes the request, so users aren't left wondering whether their click registered.
Removing the print workarounds
All window.print() calls and associated print-media CSS overrides have been removed from analytics-dashboard.tsx. The codebase is simpler, the feature is more reliable, and there's one less browser-specific edge case to maintain.
Summary
| Before | After |
|---|---|
window.print() with CSS overrides | Server-side PDF via @react-pdf/renderer |
| Inconsistent across browsers | Identical output everywhere |
| Broken on mobile and PWA | Works on all platforms |
| No shareable file | Direct file download |
| No loading feedback | Loading state on button |
| PDF only (sort of) | PDF + CSV |