Convert Html into Pdf with Vue-html2pdf Component

Kemp Steven comes up with a Vue Js Html to pdf Component called Vue-html2pdf, Which converts any vue component or element into PDF. Vue-html2pdf is primarily a vue wrapper that utilizes the html2pdf.js behind the scenes. You can view its demo here.

Installation

You’ve to install vue-html2pdf and its dependencies using npm:

npm i vue-html2pdf

A Quick Start

After the installation, you’ve to import this component:

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 

    } 

} 

After that, you can 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> 

Page Break

If you want to add a page break, you’ve to add an element with a class of html2pdf__page-break. So it will add a page break after that element.
This can still be used with the automatic pagination of the package or when the prop manual pagination is enabled.

Sample Usage:

<section slot="pdf-content"> 
    <section class="pdf-item"> 
        <h4> 
            Title 
        </h4> 
        <span> 
            Value 
        </span> 
    </section> 

 <!--After this element below, the page will break and any elements after 
<div class="html2pdf__page-break"/> will go to the next page. 
--> 

    <div class="html2pdf__page-break"/> 

    <section class="pdf-item"> 
        <h4> 
            Title 
        </h4> 
        <span> 
            Value 
        </span> 
    </section> 

</section> 

Html-to-pdf-options

Note

If you have set a value to this prop, the props below will be overridden:

‘filename’, ‘pdf-quality’, ‘pdf-format’, ‘pdf-orientation’

Any value input to those props above will have no effect.

Sample Value of html-to-pdf-options

htmlToPdfOptions: { 

    margin: 0, 
    filename: `hehehe.pdf`, 
    image: { 
        type: 'jpeg',  
        quality: 0.98 
    }, 

    enableLinks: false, 
    html2canvas: { 
        scale: 1, 
        useCORS: true 
    }, 

    jsPDF: { 
        unit: 'in', 
        format: 'a4', 
        orientation: 'portrait' 
    } 
} 

If you want to dig more about this, you can view its detailed documentation and source code on Github.