An invoice generator using the browser’s built-in print-as-pdf. Edit the templates and style to your liking. 🪄 A tooltip for markup, hyperlinks, highlighting 🌈 Upload custom logos ✨ The total is automatically calculated 🗑️ Remove and restore elements
Hey everyone. I made this app as I wanted to learn something about some tech I didn't know yet, so I looked into generating PDF's in the browser.
Tldr; browsers are already very good at doing this through Print as PDF, better than I could ever do myself. Invoicer thus allows you to edit and style an invoice in an easy and fun way, and relies on the work of smarter devs behind WebKit/Blink/Gecko to export it as PDF.
Note: each browser 'prints' a bit differently. In print settings, make sure to: 1. enable background graphics, 2. remove footer and header, 3. margins to none/zero, 4. scale to 1, 5. paper size A4
@viktor_renkema Kudos on creating Invoicer! Your approach to learning by delving into the tech behind generating PDFs in the browser is both impressive and practical. It's refreshing to see a project born out of a genuine desire to explore and understand new technologies.
@panphilov Thanks!! It's built on React using NextJS, and animations come from vanilla css combined with Framer Motion. Re: the editor/pdf creation:
Tooltip
The tooltip uses react context, I set the x and y coordinates on mouse-down and some other stuff in a tooltip provider. I also made some utils to help calculate how much the tooltip should be offset of the mouse click, cause it should be centered above your cursor, not to the top-left.
Anchor links
This was trickier to implement cause the editor updates the DOM live, so if you insert an anchor link around e.g. a , you actually make the span clickable in the preview. So instead once you add a url, i add your url's and the id of the DOM element to a state, and only once you hit export, I quickly loop over all those DOM elements that you added an anchor link to and actually attach the href. After exporting, I remove them again. That way you get them clickable in the pdf, but not in the live editor.
PDF generation
I implemented various libraries and wrote up a bunch of 'findings' in a Notion doc, and ultimately ripped it all out and just use the browser's print feature as all major browsers can print as pdf. So now its just a window.print(); call (with a bunch trickery around it, e.g. css to hide everything but the preview, and javascript trickery stuff, like the anchor links described).
The research I did into libraries like jsPDF and pdfMake summarized:
1. some libraries worked well, but they convert the DOM to a png, which isnt great as you cant do anchor links/have text selectable in the pdf reader.
2. the better options for turning HTML into non-image PDF is jsPDF. Second would be pdfMake, but all of the layouts have to be done in JSON objects and there is no real way I have found to convert an HTML page layout using this library.”
@viktor_renkema Thank you very much for such a detailed description, it is very valuable for me, because I have always been interested in creating such products. I wish you great luck in your research.
@viktor_renkema By the way, using the browser feature of printing as PDF is a brilliant idea, which, however, can lead to problems if you want to add additional methods for working with the file, for example, sending by email
@panphilov Yeah fair point, ideally I also wouldn't rely on it, so who knows, if the app takes off I may refactor everything to custom parsing of the DOM to JSON that can be exported as pdf
Framer
Tigbar
Amazy.uk
Framer
Amazy.uk
Amazy.uk
Framer
Framer