Portfolio
My latest work.
Building a Simple HTML/PHP Invoice Template with JavaScript and Browser PDF Support
I recently created a lightweight invoice template using a combination of HTML, PHP, and JavaScript. My main goal was to make it user-friendly, require minimal setup, and avoid heavy dependencies that don’t always play nicely with modern CSS layouts.
How It Works
- Invoice Structure (HTML & CSS)
The invoice layout was built with semantic HTML and styled using CSS Grid/Flexbox. Input fields allow the user to type in item descriptions and fees directly into the invoice. - Dynamic Content with PHP
- PHP inserts the current date automatically.
- It also generates a random invoice number every time the page is loaded.
This keeps the template dynamic without requiring manual editing.
- Fee Calculation with JavaScript
- A “Recalculate” button updates the totals.
- The script sums all entered fees and displays the grand total at the bottom of the invoice.
- Saving as PDF
Instead of relying on external libraries like mPDF or htmltopdf.js (which often struggle with modern CSS and tend to save files server-side), I chose a simpler approach:- A “Save to PDF” button triggers the browser’s native print dialog box, where users can select Save as PDF.
- This ensures consistent rendering of CSS Grid and other modern styling directly in the browser.
Why This Approach?
- Simplicity: No need to configure third-party PDF libraries.
- Modern CSS Support: The browser handles CSS Grid, Flexbox, and other modern features flawlessly.
- User Control: The file is saved client-side via the print dialog, not generated on the server.
This method creates a straightforward and flexible invoice template that looks good, works across browsers, and avoids common PDF-rendering issues.