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:

https://github.com/kempsteven/vue-html2pdf

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

Demo Site:

https://vue-html2pdf-demo.netlify.com/

Demo Github:

https://github.com/kempsteven/vue-html2pdf-demo

 

 

vue-html2pdf

 

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.

 

 

Usage

 

 

import VueHtml2pdf from 'vue-html2pdf'

export default {
    methods: {
        /*
            Generate Report using refs and calling the
            refs function generatePdf()
        */
        generateReport () {
            this.$refs.html2Pdf.generatePdf()
        }
    },

    components: {
        VueHtml2pdf
    }
}

 

 

To use it in the template

<template>
   <div>
     <vue-html2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="true"
        :preview-modal="true"
        :paginate-elements-by-height="1400"
        filename="hee hee"
        :pdf-quality="2"
        :manual-pagination="false"
        pdf-format="a4"
        pdf-orientation="landscape"
        pdf-content-width="800px"

        @progress="onProgress($event)"
        @hasStartedGeneration="hasStartedGeneration()"
        @hasGenerated="hasGenerated($event)"
        ref="html2Pdf"
    >
        <section slot="pdf-content">
            <!-- PDF Content Here -->
        </section>
    </vue-html2pdf>
   </div>
</template>

 

 

html-to-pdf-options

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