I want to create a PDF report within a browser extension tab. I want to be able to add graphs, text, UTF-8 support, images, position text but nothing overly crazy in terms of styling and layout apart from that.
I've been reading about the limitations of jspdf (no UTF8 support) and pdfmake. It seems like they'll be complicated to work with lots of gotchas.
One idea I have is this:
Put directly on the page the HTML needed for my report.
Use CSS to hide everything but the report HTML and use "@media print" styles to style the report.
Trigger "window.print()" to print the page in JavaScript. Chrome shows a preview and lets you save to PDF in a click. Firefox's print preview shows a preview and the interface is a bit more messy but you can save to PDF in a few clicks.
Am I missing something? Are there any major downsides to my approach? Maybe OS specific issues? Why would you use jspdf or pdfmake over this?
I don't see this approach being suggested anywhere which I find strange. The only downside I see is the user may be confused about why they're being asked to print something when they weren't expecting a PDF but as the reports aren't generated often it's not a big deal here.
As far as I know, printing from browser always generates PDF as image (you can't select text or elements). Because of that filesize is bigger. I think both of that approaches use ht2ml->canvas then paste canvas as picture inside of PDF.
jsPDF and pdfmake will let you generate PDF with "real" text and elements. It's harder to do, but quality and filesize are better. Depends on your use case.