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.

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

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

Getting started

NPM

Install vue-html2pdf and its dependencies using NPM with

npm i vue-html2pdf

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>

Using in Nuxtjs

// plugins/vue-html2pdf.js
import Vue from 'vue'
import VueHtml2pdf from 'vue-html2pdf'
Vue.use(VueHtml2pdf)

// nuxt.config.js
plugins: [
    { src: '@/plugins/vue-html2pdf', mode: 'client' }
],

<!-- on-component-usage.vue -->
<!-- you should add <client-only> tag -->
<!-- more info for client-only tag: https://nuxtjs.org/api/components-client-only/ -->
...
<client-only>
    <vue-html2pdf>
        <section slot="pdf-content">
        </section>
    </vue-html2pdf>
</client-only>
...

Props

This props can seen in the Usage Part

html-to-pdf-options

IMPORTANT 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 inputed 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'
    }
}

Events

This events can seen in the Usage Part

Sample Use Case of @beforeDownload

This is a sample Use case of @beforeDownload event.

As you can see the event arguments contains a { html2pdf, options, pdfContent } destructured object. The arguments can used to have full control of the html2pdf.js process. See the Docs here

Below is a sample code to add a page number at the lower right on each PDF pages using the jsPDF package integrated in html2pdf.js.

NOTE that you will have to set the props enable-download and preview-modal to false so it will not generate any pdf. You will have to handle the downloading yourself.

Please refer to the html2pdf Docs to know the full details of the usage of html2pdf.js

<vue-html2pdf
    :show-layout="false"
    :float-layout="true"
    :enable-download="false"
    :preview-modal="false"
    filename="hehehe"
    :paginate-elements-by-height="1100"
    :pdf-quality="2"
    pdf-format="a4"
    pdf-orientation="portrait"
    pdf-content-width="800px"
    :manual-pagination="false"

    @progress="onProgress($event)"
    @startPagination="startPagination()"
    @hasPaginated="hasPaginated()"
    @beforeDownload="beforeDownload($event)"
    @hasDownloaded="hasDownloaded($event)"
    ref="html2Pdf"
>
    <pdf-content slot="pdf-content" />
</vue-html2pdf>

<script>
import VueHtml2pdf from 'vue-html2pdf'

export default {
    components: {
    VueHtml2pdf
    },

    methods: {
        async beforeDownload ({ html2pdf, options, pdfContent }) {
            await html2pdf().set(options).from(pdfContent).toPdf().get('pdf').then((pdf) => {
                const totalPages = pdf.internal.getNumberOfPages()
                for (let i = 1; i <= totalPages; i++) {
                    pdf.setPage(i)
                    pdf.setFontSize(10)
                    pdf.setTextColor(150)
                    pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth() * 0.88), (pdf.internal.pageSize.getHeight() - 0.3))
                } 
            }).save()
        }
    }
}

Slot

This slot can seen in the Usage Part

Page Break

By adding an element with a class of html2pdf__page-break will add page break after that element.

Usage: 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>

Guide

The recommended format for the pdf-content

<section slot="pdf-content">
    <!--
        Divide your content into section, this pdf-item will
        be the element that it's content will not be separated
        in the paginating process. ex. <h4> and <span> wont be separated.
    -->
    <section class="pdf-item">
        <h4>
            Title
        </h4>

        <span>
            Value
        </span>
    </section>

    <!--
        All other pdf-item will be separated in the pagination process,
        depending on paginate-elements-by-height prop.
    -->
    <section class="pdf-item">
        <h4>
            Title
        </h4>

        <span>
            Value
        </span>
    </section>

    <!--
        If you have any image with a remote source
        set html2canvas.useCORS to true, although it is set to true by default
        Ex.
        html2canvas: {
            useCORS: true
        }
    -->
    <section class="pdf-item">
        <img :src="remoteImageLink">
    </section>
</section>

Known issues

As you can see on the description this package is mostly just a Vue.js wrapper for html2pdf.js, Below are known issues that comes along with html2pdf.js

1. Rendering: The rendering engine html2canvas isn't perfect (though it's pretty good!). If html2canvas isn't rendering your content correctly, I can't fix it.

   • You can test this with something like this fiddle, to see if there's a problem in the canvas creation itself.

2. Node cloning (CSS etc): The way html2pdf.js clones your content before sending to html2canvas is buggy. A fix is currently being developed - try out:

   • direct file: Go to html2pdf.js/bugfix/clone-nodes-BUILD and replace the files in your project with the relevant files (e.g. dist/html2pdf.bundle.js)
   • npm: npm install eKoopmans/html2pdf.js#bugfix/clone-nodes-BUILD
   • Related project: Bugfix: Cloned nodes

3. Resizing: Currently, html2pdf.js resizes the root element to fit onto a PDF page (causing internal content to "reflow").

   • This is often desired behaviour, but not always.
   • There are plans to add alternate behaviour (e.g. "shrink-to-page"), but nothing that's ready to test yet.
   • Related project: Feature: Single-page PDFs

4. Rendered as image: html2pdf.js renders all content into an image, then places that image into a PDF.

   • This means text is not selectable or searchable, and causes large file sizes.
   • This is currently unavoidable, however recent improvements in jsPDF mean that it may soon be possible to render straight into vector graphics.
   • Related project: Feature: New renderer

5. Promise clashes: html2pdf.js relies on specific Promise behaviour, and can fail when used with custom Promise libraries.

   • In the next release, Promises will be sandboxed in html2pdf.js to remove this issue.
   • Related project: Bugfix: Sandboxed promises
6. Maximum size: HTML5 canvases have a maximum height/width. Anything larger will fail to render.
   • This is a limitation of HTML5 itself, and results in large PDFs rendering completely blank in html2pdf.js.
   • The jsPDF canvas renderer (mentioned in Known Issue #4) may be able to fix this issue!
   • Related project: Bugfix: Maximum canvas size