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.

Table of contents

- Getting started
- NPM
- Migrating from 1.7.x to 1.8.x (and so on).
- Events
- Usage
- Using in Nuxt.js
- Props
- Events
- Sample Use Case of @beforeDownload
- Slot
- Page Break
- Guide
- Browser

Getting started

#### NPM

Install vue-html2pdf and its dependencies using NPM with npm i vue-html2pdf

Migrating from 1.7.x to 1.8.x (and so on)

There are a few change in version 1.7x to 1.8.x and so on.

#### Events
| 1.7.x | 1.8.x (and so on) | Description |
|-----------------------------|--------------------------|---------------------------------------------------------------------------------------------------------------------|
| @hasStartedDownload | @startPagination | The event "hasStartedDownload" is now changed to "startPagination". |
| - | @hasPaginated | The event "hasPaginated" is an event triggered after pagination process is done. |
| - | @beforeDownload | The event "beforeDownload" is an event triggered before the PDF generation and downloading. The event arguments contains an object { html2pdf, options, pdfContent }, which can be used to have full control of html2pdf.js like e.g.(Add page count on each PDF page, Full control of jsPDF to design page, etc.), you will have to set the props :enable-download, :preview-modal to false so it will not generate the PDF. |
| @hasGenerated | @hasDownloaded | The event "hasGenerated" is now changed to "hasDownloaded". |

Usage

``js
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
`html

`

#### Using in Nuxtjs
`js
// plugins/vue-html2pdf.js
import Vue from 'vue'
import VueHtml2pdf from 'vue-html2pdf'
Vue.use(VueHtml2pdf)
`

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



...

...
`

Props

This props can seen in the Usage Part

| Props | Options | Description |
|-----------------------------|--------------------------|---------------------------------------------------------------------------------------------------------------------|
| show-layout | true, false | Shows the pdf-content slot, using this you can see what contents will be converted to PDF. |
| float-layout | true, false | Enabled by default. If the props is set to false The props show-layout will be overridden. The layout will not float and the layout will ALWAYS show. |
| enable-download | true, false | Enabled by default. When enabled the pdf will be downloaded and vise-versa. |
| preview-modal | true, false | Once you generate the pdf, PDF will be previewed on a modal, PDF will not be downloaded. |
| paginate-elements-by-height | Any Number | The number inputed will be used to paginate elements, the number will be in px units only. |
| manual-pagination | true, false | When enabled, the package will NOT automatically paginate the elements. Instead the pagination process will rely on the elements with a class "html2pdf__page-break" to know where to page break, which is automatically done by html2pdf.js |
| filename | Any String | The number inputed will be used to paginate elements, the number will be in px units only. |
| pdf-quality | 0 - 2 (Can have decimal) | 2 is the highest quality and 0.1 is the lowest quality, 0 will make the PDF disappear. |
| pdf-format | a0, a1, a2, a3, a4, letter, legal, a5, a6, a7, a8, a9, a10 | This are the PDF formats (Paper Sizes) |
| pdf-orientation | portrait, landscape | This are the PDF orientation |
| pdf-content-width | Any css sizes (e.g. "800px", "65vw", "70%") | This is the PDF's content width |
| html-to-pdf-options | html-to-pdf-options details here | This prop gives a way to configure the whole html2pdf.js options |

html-to-pdf-options

|Name |Type |Default |Description |
|------------|----------------|--------------------------------|------------------------------------------------------------------------------------------------------------|
|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).|


#### 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
`javascript
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

| Events | Description |
|-----------------------------|------------------------------------------------------------------------------------------------------------------------------|
| @progress | This will return the progress of the PDF Generation. The event argument contains the progress of the PDF generation process. |
| @startPagination | This will be triggered on start of pagination process. |
| @hasPaginated | This will be triggered after the pagination process. |
| @beforeDownload | This will be triggered before the PDF generation and download. The event arguments contains an object { html2pdf, options, pdfContent }, which can be used to have full control of html2pdf.js like e.g.(Add page count on each PDF page, Full control of jsPDF to design page, etc.), you will have to set the props :enable-download, :preview-modal to false so it will not generate the PDF. |
| @hasDownloaded | This will be triggered after downloading the PDF. The event arguments contains the Blob File of the generated PDF. This will NOT be trigerred if the props enable-download AND preview-modal is set to false. |

#### 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

`html
: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"
>


`

`javascript