Skip to content

Commit

Permalink
Updated and Added New Events and Updated Docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@oppai1232
oppai1232 committed Oct 3, 2020
1 parent a24f861 commit 4ce2318
Show file tree
Hide file tree
Showing 7 changed files with 152 additions and 44 deletions.
96 changes: 87 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,13 @@ vue-html2pdf converts any vue component or element into PDF, vue-html2pdf is bas
## Table of contents
- [Getting started](#getting-started)
- [NPM](#npm)
- [Migrating from 1.7.x to 1.8.x (and so on)](#migrating-from-17x-to-18x-and-so-on).
- [Events](#events)
- [Usage](#usage)
- [Using in Nuxt.js](#using-in-nuxtjs)
- [Props](#props)
- [Events](#events)
- [Events](#events-1)
- [Sample Use Case of @beforeDownload](#sample-use-case-of-beforedownload)
- [Slot](#slot)
- [Page Break](#page-break)
- [Guide](#guide)
Expand All @@ -32,6 +35,16 @@ vue-html2pdf converts any vue component or element into PDF, vue-html2pdf is bas

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
Expand Down Expand Up @@ -183,19 +196,83 @@ htmlToPdfOptions: {
## Events
This events can seen in the Usage Part

| Events | Description |
|----------------------------|------------------------------------------------------------------------------------------------------------------------|
| progress | This will return the progress of the PDF Generation. |
| hasStartedGeneration | This only be triggered on start of the generation of the PDF. |
| hasGenerated | This will be triggered after the generation of the PDF, will emit a Blob File of the PDF, can be retrived using $event.|
| 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](https://www.npmjs.com/package/html2pdf.js#usage)

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](https://www.npmjs.com/package/html2pdf.js#usage) to know the full details of the usage of html2pdf.js

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

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

| Slot | Description |
|--------------------------|---------------------------------------------------------------------------------------------------------------------|
| pdf-content | Use this slot to insert you component or element that will be converted to PDF |
| pdf-content | Use this slot to insert your component or element that will be converted to PDF |


## Page Break
Expand Down Expand Up @@ -324,12 +401,13 @@ Copyright (c) 2020 Kemp Sayson
## Browser
Package has been tested in these browsers:

Chrome Version 85.0.4183.102 (Official Build) (64-bit)
Chrome Version 85.0.4183.121 (Official Build) (64-bit)

Mozilla Firefox Version 80.0.1 (64-bit)

Microsoft Edge Version 85.0.564.51 (Official build) (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)
## Show your support

Give a ⭐️ if this project helped you!
Expand Down
32 changes: 21 additions & 11 deletions dist/vue-html2pdf.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ var script = {
},

generatePdf: function generatePdf () {
this.$emit('hasStartedDownload');
this.$emit('startPagination');
this.progress = 0;
this.paginationOfElements();
},
Expand All @@ -131,6 +131,7 @@ var script = {
*/
if (this.manualPagination) {
this.progress = 70;
this.$emit('hasPaginated');
this.downloadPdf();
return
}
Expand Down Expand Up @@ -187,27 +188,36 @@ var script = {
this.progress = 70;
}

this.$emit('hasPaginated');
this.downloadPdf();
},

downloadPdf: async function downloadPdf () {
// Set Element and Html2pdf.js Options
var element = this.$refs.pdfContent;
var opt = this.setOptions();
var pdfBlobUrl = await html2pdf().set(opt).from(element).output('bloburl');
var pdfContent = this.$refs.pdfContent;
var options = this.setOptions();

this.$emit('beforeDownload', { html2pdf: html2pdf, options: options, pdfContent: pdfContent });

var html2PdfSetup = html2pdf().set(options).from(pdfContent);
var pdfBlobUrl = null;

if (this.previewModal) {
this.pdfFile = pdfBlobUrl;
this.pdfFile = await html2PdfSetup.output('bloburl');
pdfBlobUrl = this.pdfFile;
}

if (this.enableDownload) {
pdfBlobUrl = await html2pdf().set(opt).from(element).save().output('bloburl');
pdfBlobUrl = await html2PdfSetup.save().output('bloburl');
}

if (pdfBlobUrl) {
var res = await fetch(pdfBlobUrl);
var blobFile = await res.blob();
this.$emit('hasDownloaded', blobFile);
}

var res = await fetch(pdfBlobUrl);
var blobFile = await res.blob();
this.progress = 100;
this.$emit('hasGenerated', blobFile);
},

setOptions: function setOptions () {
Expand Down Expand Up @@ -387,11 +397,11 @@ var __vue_staticRenderFns__ = [];
/* style */
var __vue_inject_styles__ = function (inject) {
if (!inject) { return }
inject("data-v-4e0ecd8c_0", { source: ".vue-html2pdf .layout-container[data-v-4e0ecd8c]{position:fixed;width:100vw;height:100vh;left:-100vw;top:0;z-index:-9999;background:rgba(95,95,95,.8);display:flex;justify-content:center;align-items:flex-start;overflow:auto}.vue-html2pdf .layout-container.show-layout[data-v-4e0ecd8c]{left:0;z-index:9999}.vue-html2pdf .layout-container.unset-all[data-v-4e0ecd8c]{all:unset;width:auto;height:auto}.vue-html2pdf .pdf-preview[data-v-4e0ecd8c]{position:fixed;width:65%;min-width:600px;height:80vh;top:100px;z-index:9999999;left:50%;transform:translateX(-50%);border-radius:5px;box-shadow:0 0 10px #00000048}.vue-html2pdf .pdf-preview button[data-v-4e0ecd8c]{position:absolute;top:-20px;left:-15px;width:35px;height:35px;background:#555;border:0;box-shadow:0 0 10px #00000048;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}.vue-html2pdf .pdf-preview iframe[data-v-4e0ecd8c]{border:0}.vue-html2pdf .transition-anim-enter-active[data-v-4e0ecd8c],.vue-html2pdf .transition-anim-leave-active[data-v-4e0ecd8c]{transition:opacity .3s ease-in}.vue-html2pdf .transition-anim-enter[data-v-4e0ecd8c],.vue-html2pdf .transition-anim-leave-to[data-v-4e0ecd8c]{opacity:0}", map: undefined, media: undefined });
inject("data-v-1fd3ad26_0", { source: ".vue-html2pdf .layout-container[data-v-1fd3ad26]{position:fixed;width:100vw;height:100vh;left:-100vw;top:0;z-index:-9999;background:rgba(95,95,95,.8);display:flex;justify-content:center;align-items:flex-start;overflow:auto}.vue-html2pdf .layout-container.show-layout[data-v-1fd3ad26]{left:0;z-index:9999}.vue-html2pdf .layout-container.unset-all[data-v-1fd3ad26]{all:unset;width:auto;height:auto}.vue-html2pdf .pdf-preview[data-v-1fd3ad26]{position:fixed;width:65%;min-width:600px;height:80vh;top:100px;z-index:9999999;left:50%;transform:translateX(-50%);border-radius:5px;box-shadow:0 0 10px #00000048}.vue-html2pdf .pdf-preview button[data-v-1fd3ad26]{position:absolute;top:-20px;left:-15px;width:35px;height:35px;background:#555;border:0;box-shadow:0 0 10px #00000048;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}.vue-html2pdf .pdf-preview iframe[data-v-1fd3ad26]{border:0}.vue-html2pdf .transition-anim-enter-active[data-v-1fd3ad26],.vue-html2pdf .transition-anim-leave-active[data-v-1fd3ad26]{transition:opacity .3s ease-in}.vue-html2pdf .transition-anim-enter[data-v-1fd3ad26],.vue-html2pdf .transition-anim-leave-to[data-v-1fd3ad26]{opacity:0}", map: undefined, media: undefined });

};
/* scoped */
var __vue_scope_id__ = "data-v-4e0ecd8c";
var __vue_scope_id__ = "data-v-1fd3ad26";
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
Expand Down
Loading

0 comments on commit 4ce2318

Please sign in to comment.