Build a HTML2PDF.js PDF Generator in Vue.js Using vue-html2pdf Library in Browser Using Javascript Full Project For Beginners

  • Post author:
  • Post category:Vue
  • Post comments:0 Comments



VueHTML2PDF Documentation

Package Github:

Please see the demo site and demo github for easier understanding of the usage of the package.

Demo Site:

Demo Github:





vue-html2pdf converts any vue component or element into PDF, vue-html2pdf is basically a vue wrapper only and uses html2pdf.js behind the scenes.






import VueHtml2pdf from 'vue-html2pdf'

export default {
    methods: {
            Generate Report using refs and calling the
            refs function generatePdf()
        generateReport () {

    components: {



To use it in the template

        filename="hee hee"

        <section slot="pdf-content">
            <!-- PDF Content Here -->




Name Type Default Description
margin number or array PDF margin (in jsPDF units). Can be a single number, [vMargin, hMargin], or [top, left, bottom, right].
filename string ‘file.pdf’ The default filename of the exported PDF.
image object {type: 'jpeg', quality: 0.95} The image type and quality used to generate the PDF. See Image type and quality.
enableLinks boolean false If enabled, PDF hyperlinks are automatically added ontop of all anchor tags.
html2canvas object { } Configuration options sent directly to html2canvas (see here for usage).
jsPDF object { } Configuration options sent directly to jsPDF (see here for usage).
See also  Vue.js Lazy Loading Images From API in Grid View Using vue-lazyload Library Example in Javascript Full Project For Beginners




Leave a Reply