How to generate pdf from html and css in Vuejs?

Question

I'm working on a tool "Resume Builder" using Vuejs. Is there any bettter way to generate pdf ( of resume ) from html with css . I have used jsPdf Library but not getting desired outcomes. I want to keep html "a" tag clickable in generated pdf. I have also tried html2canvas.js but in that "a" tag is not clickable due to image in pdf. jsPdf is generating pdf but not applying css.

Answer 1

I recommend you to investigate a bit different approach for generating PDF from HTML just because all the client-side libraries for HTML to PDF generation have lots of problems when generating really complex documents with lots of formatting etc.

The alternative way is to perform the PDF generation itself on the server-side. For example, you could make use of Headless Chrome managed by your backend for turning any HTML into PDF.

We used a very similar approach to implement pdf generation for this free resume builder service. The only downside we faced was that different browsers like Firefox or IE might occasionally display an HTML document a bit different than it's printed out as PDF bu Chrome. Good luck!

Answer 2

I found Kendo UI is the best api for pdf from DOM.

https://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom

Answer 3

You might want to give Pdf Make a try.

PDF Make on Github

It has support for styling and links. But you have to do most of the styling yourself.