1

I want to convert an HTML page written with Vue.js to a vector-based PDF client-side. I understand there are solutions in the backend, however, in my case I specifically want client-side. I have very complex Vue components and styling which I would like to print to pdf. I tried multiple approaches and I could not find a solution.

Here is what I tried: -

  1. The easiest way I found is window.print().

The issue with this approach, is that there is no other way to invoke the download functionality directly without going through the pop-dialog. Another issue I found window.onafterprint and window.onbeforeprint event listeners don't work on firefox but work in chrome. In firefox, both events fire at the same time. regardless, I do not like the default dialog, I would rather build my own.

  1. I retrieved the HTML and CSS from the DOM using this.$el.innerHTML, and window.getComputedStyle(element) and saved them to a variable, then converted to blob and downloaded it with javascript.

this solution worked, however only in DEV build, since I bundle my app with Vite, the computed styles don't render on the DOM as I expected when in Production build; which I believe is due to the way Vite bundles CSS for optimization. Therefore the result will only be HTML with no styling.

  1. I used the popular vue-html2pdf library and it is straightforward.

the issue with this approach is the fact it simply renders HTML and CSS to an image the saves as a pdf, therefore the output will be an image-based-pdf. which is not my preferred kind of pdf.

I cannot find any library that takes in HTML and CSS and covert to a Vector-based pdf on the client-side.

Omar Bitar
  • 53
  • 5
  • Hi @Omar Have you found something related to vector pdf in vuejs. I have similar functionality. Please share If you found something – Nadeem Shaikh Mar 14 '23 at 13:17

0 Answers0