vue-html2pdf
Advanced tools
https://github.com/kempsteven/vue-html2pdf
Please see the demo site and demo github for easier understanding of the usage of the package.
https://vue-html2pdf-demo.netlify.com/
https://github.com/kempsteven/vue-html2pdf-demo
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.
Install vue-html2pdf and its dependencies using NPM with npm i vue-html2pdf
There are a few change in version 1.7x to 1.8.x and so on.
| 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". |
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>
// 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>
...
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 |
| 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). |
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.
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'
}
}
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. |
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()
}
}
}
This slot can seen in the Usage Part
| Slot | Description |
|---|---|
| pdf-content | Use this slot to insert your component or element that will be converted to PDF |
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>
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>
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
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.
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:
dist/html2pdf.bundle.js)npm install eKoopmans/html2pdf.js#bugfix/clone-nodes-BUILDResizing: Currently, html2pdf.js resizes the root element to fit onto a PDF page (causing internal content to "reflow").
Rendered as image: html2pdf.js renders all content into an image, then places that image into a PDF.
Promise clashes: html2pdf.js relies on specific Promise behaviour, and can fail when used with custom Promise libraries.
Maximum size: HTML5 canvases have a maximum height/width. Anything larger will fail to render.
Copyright (c) 2020 Kemp Sayson
Package has been tested in these browsers:
Chrome Version 85.0.4183.121 (Official Build) (64-bit)
Mozilla Firefox Version 80.0.1 (64-bit)
Microsoft Edge Version 85.0.564.63 (Official build) (64-bit)
Brave Version 1.14.84 Chromium: 85.0.4183.121 (Official Build) (64-bit)
Give a ⭐️ if this project helped you! I get motivated if I get a star.
It's basically just like the stars we get when we were in preschool but for grown ups lol.
FAQs
https://github.com/kempsteven/vue-html2pdf
We found that vue-html2pdf demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.