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.