https://github.com/sango-tech/vue3-simple-html2pdf
Export/Download Vue3 using html2pdf.js. Easy to custom any pdf style because it is exported from real HTML.
https://github.com/sango-tech/vue3-simple-html2pdf
html2pdf vue3
Last synced: about 1 year ago
JSON representation
Export/Download Vue3 using html2pdf.js. Easy to custom any pdf style because it is exported from real HTML.
- Host: GitHub
- URL: https://github.com/sango-tech/vue3-simple-html2pdf
- Owner: sango-tech
- License: mit
- Created: 2021-04-26T07:22:33.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-04T12:54:54.000Z (about 3 years ago)
- Last Synced: 2025-05-05T20:11:59.270Z (about 1 year ago)
- Topics: html2pdf, vue3
- Language: Vue
- Homepage:
- Size: 154 KB
- Stars: 24
- Watchers: 3
- Forks: 10
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue3-simple-html2pdf
- Export and auto download PDF using vue3 and html2pdf.js.
- Easy to custom any PDF style because it will be export from real html.
- Can use custom css style for pdf page using vue style.
# Example sanbox code
https://codesandbox.io/s/vue3-simple-html2pdf-jxy2uz
# Install
```
npm install --save vue3-simple-html2pdf
```
or yarn
```
yarn add vue3-simple-html2pdf
```
# Register component
```
import Vue3SimpleHtml2pdf from "vue3-simple-html2pdf";
Vue.use(Vue3SimpleHtml2pdf);
```
# Use component
```
HTML Table
Company
Contact
Country
Alfreds Futterkiste
Maria Anders
Germany
Centro comercial Moctezuma
Francisco Chang
Mexico
Ernst Handel
Roland Mendel
Austria
Island Trading
Helen Bennett
UK
Laughing Bacchus Winecellars
Yoshi Tannamuri
Canada
Magazzini Alimentari Riuniti
Giovanni Rovelli
Italy
1
...
// Props
pdfOptions = {
margin: 15,
image: {
type: 'jpeg',
quality: 1,
},
html2canvas: { scale: 3 },
jsPDF: {
unit: 'mm',
format: 'a4',
orientation: 'p',
},
},
exportFilename: 'my-custom-file.pdf',
...
table {
font-size: 14px;
text-align: center;
border: 1px solid #ccc;
border-collapse: collapse;
th {
background: #ddd;
font-weight: bold;
}
td,
th {
padding: 8px;
border: 1px solid #ccc;
}
}
... Any other styles here
```
Call start download pdf
```
this.$refs.vue3SimpleHtml2pdf.download()
```
To break page, use `html2pdf__page-break`
```
```
To add page number, use `html2pdf__page-number`
```
{{ pageNumber }}
```
# Sample result
# License
The MIT License