Skip to content

Commit 4ce2318

Browse files
oppai1232oppai1232
committed
Updated and Added New Events and Updated Docs
1 parent a24f861 commit 4ce2318

7 files changed

+152
-44
lines changed

‎README.md

Lines changed: 87 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,13 @@ vue-html2pdf converts any vue component or element into PDF, vue-html2pdf is bas
1818
## Table of contents
1919
- [Getting started](#getting-started)
2020
- [NPM](#npm)
21+
- [Migrating from 1.7.x to 1.8.x (and so on)](#migrating-from-17x-to-18x-and-so-on).
22+
- [Events](#events)
2123
- [Usage](#usage)
2224
- [Using in Nuxt.js](#using-in-nuxtjs)
2325
- [Props](#props)
24-
- [Events](#events)
26+
- [Events](#events-1)
27+
- [Sample Use Case of @beforeDownload](#sample-use-case-of-beforedownload)
2528
- [Slot](#slot)
2629
- [Page Break](#page-break)
2730
- [Guide](#guide)
@@ -32,6 +35,16 @@ vue-html2pdf converts any vue component or element into PDF, vue-html2pdf is bas
3235

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

38+
## Migrating from 1.7.x to 1.8.x (and so on)
39+
There are a few change in version 1.7x to 1.8.x and so on.
40+
41+
#### Events
42+
| 1.7.x | 1.8.x (and so on) | Description |
43+
|-----------------------------|--------------------------|---------------------------------------------------------------------------------------------------------------------|
44+
| @hasStartedDownload | @startPagination | The event "hasStartedDownload" is now changed to "startPagination". |
45+
| - | @hasPaginated | The event "hasPaginated" is an event triggered after pagination process is done. |
46+
| - | @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. |
47+
| @hasGenerated | @hasDownloaded | The event "hasGenerated" is now changed to "hasDownloaded". |
3548

3649
## Usage
3750
```js
@@ -183,19 +196,83 @@ htmlToPdfOptions: {
183196
## Events
184197
This events can seen in the Usage Part
185198

186-
| Events | Description |
187-
|----------------------------|------------------------------------------------------------------------------------------------------------------------|
188-
| progress | This will return the progress of the PDF Generation. |
189-
| hasStartedGeneration | This only be triggered on start of the generation of the PDF. |
190-
| hasGenerated | This will be triggered after the generation of the PDF, will emit a Blob File of the PDF, can be retrived using $event.|
199+
| Events | Description |
200+
|-----------------------------|------------------------------------------------------------------------------------------------------------------------------|
201+
| @progress | This will return the progress of the PDF Generation. The event argument contains the progress of the PDF generation process. |
202+
| @startPagination | This will be triggered on start of pagination process. |
203+
| @hasPaginated | This will be triggered after the pagination process. |
204+
| @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. |
205+
| @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. |
206+
207+
#### Sample Use Case of @beforeDownload
208+
This is a sample Use case of `@beforeDownload` event.
209+
210+
As you can see the event arguments contains a `{ html2pdf, options, pdfContent }` destructured object.
211+
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)
212+
213+
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.
214+
215+
NOTE that you will have to set the props `enable-download` and `preview-modal` to false so it will not generate any pdf.
216+
You will have to handle the downloading yourself.
217+
218+
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
219+
220+
```html
221+
<vue-html2pdf
222+
:show-layout="false"
223+
:float-layout="true"
224+
:enable-download="false"
225+
:preview-modal="false"
226+
filename="hehehe"
227+
:paginate-elements-by-height="1100"
228+
:pdf-quality="2"
229+
pdf-format="a4"
230+
pdf-orientation="portrait"
231+
pdf-content-width="800px"
232+
:manual-pagination="false"
233+
234+
@progress="onProgress($event)"
235+
@startPagination="startPagination()"
236+
@hasPaginated="hasPaginated()"
237+
@beforeDownload="beforeDownload($event)"
238+
@hasDownloaded="hasDownloaded($event)"
239+
ref="html2Pdf"
240+
>
241+
<pdf-content slot="pdf-content" />
242+
</vue-html2pdf>
243+
```
244+
245+
```javascript
246+
<script>
247+
import VueHtml2pdf from 'vue-html2pdf'
248+
249+
export default {
250+
components: {
251+
VueHtml2pdf
252+
},
191253

254+
methods: {
255+
async beforeDownload ({ html2pdf, options, pdfContent }) {
256+
await html2pdf().set(options).from(pdfContent).toPdf().get('pdf').then((pdf) => {
257+
const totalPages = pdf.internal.getNumberOfPages()
258+
for (let i = 1; i <= totalPages; i++) {
259+
pdf.setPage(i)
260+
pdf.setFontSize(10)
261+
pdf.setTextColor(150)
262+
pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth() * 0.88), (pdf.internal.pageSize.getHeight() - 0.3))
263+
}
264+
}).save()
265+
}
266+
}
267+
}
268+
```
192269

193270
## Slot
194271
This slot can seen in the Usage Part
195272

196273
| Slot | Description |
197274
|--------------------------|---------------------------------------------------------------------------------------------------------------------|
198-
| pdf-content | Use this slot to insert you component or element that will be converted to PDF |
275+
| pdf-content | Use this slot to insert your component or element that will be converted to PDF |
199276

200277

201278
## Page Break
@@ -324,12 +401,13 @@ Copyright (c) 2020 Kemp Sayson
324401
## Browser
325402
Package has been tested in these browsers:
326403

327-
Chrome Version 85.0.4183.102 (Official Build) (64-bit)
404+
Chrome Version 85.0.4183.121 (Official Build) (64-bit)
328405

329406
Mozilla Firefox Version 80.0.1 (64-bit)
330407

331-
Microsoft Edge Version 85.0.564.51 (Official build) (64-bit)
408+
Microsoft Edge Version 85.0.564.63 (Official build) (64-bit)
332409

410+
Brave Version 1.14.84 Chromium: 85.0.4183.121 (Official Build) (64-bit)
333411
## Show your support
334412

335413
Give a ⭐️ if this project helped you!

‎dist/vue-html2pdf.esm.js

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ var script = {
115115
},
116116

117117
generatePdf: function generatePdf () {
118-
this.$emit('hasStartedDownload');
118+
this.$emit('startPagination');
119119
this.progress = 0;
120120
this.paginationOfElements();
121121
},
@@ -131,6 +131,7 @@ var script = {
131131
*/
132132
if (this.manualPagination) {
133133
this.progress = 70;
134+
this.$emit('hasPaginated');
134135
this.downloadPdf();
135136
return
136137
}
@@ -187,27 +188,36 @@ var script = {
187188
this.progress = 70;
188189
}
189190

191+
this.$emit('hasPaginated');
190192
this.downloadPdf();
191193
},
192194

193195
downloadPdf: async function downloadPdf () {
194196
// Set Element and Html2pdf.js Options
195-
var element = this.$refs.pdfContent;
196-
var opt = this.setOptions();
197-
var pdfBlobUrl = await html2pdf().set(opt).from(element).output('bloburl');
197+
var pdfContent = this.$refs.pdfContent;
198+
var options = this.setOptions();
199+
200+
this.$emit('beforeDownload', { html2pdf: html2pdf, options: options, pdfContent: pdfContent });
201+
202+
var html2PdfSetup = html2pdf().set(options).from(pdfContent);
203+
var pdfBlobUrl = null;
198204

199205
if (this.previewModal) {
200-
this.pdfFile = pdfBlobUrl;
206+
this.pdfFile = await html2PdfSetup.output('bloburl');
207+
pdfBlobUrl = this.pdfFile;
201208
}
202209

203210
if (this.enableDownload) {
204-
pdfBlobUrl = await html2pdf().set(opt).from(element).save().output('bloburl');
211+
pdfBlobUrl = await html2PdfSetup.save().output('bloburl');
212+
}
213+
214+
if (pdfBlobUrl) {
215+
var res = await fetch(pdfBlobUrl);
216+
var blobFile = await res.blob();
217+
this.$emit('hasDownloaded', blobFile);
205218
}
206219

207-
var res = await fetch(pdfBlobUrl);
208-
var blobFile = await res.blob();
209220
this.progress = 100;
210-
this.$emit('hasGenerated', blobFile);
211221
},
212222

213223
setOptions: function setOptions () {
@@ -387,11 +397,11 @@ var __vue_staticRenderFns__ = [];
387397
/* style */
388398
var __vue_inject_styles__ = function (inject) {
389399
if (!inject) { return }
390-
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 });
400+
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 });
391401

392402
};
393403
/* scoped */
394-
var __vue_scope_id__ = "data-v-4e0ecd8c";
404+
var __vue_scope_id__ = "data-v-1fd3ad26";
395405
/* module identifier */
396406
var __vue_module_identifier__ = undefined;
397407
/* functional template */

0 commit comments

Comments
 (0)