Blog Detail

24

Aug
Convert Html into Pdf with Vue-html2pdf Component cover image

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

Name Type Default Default
margin number or array 0 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).

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.

Published at : 24-08-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project