Skip to content

Commit ac16221

Browse files
barretthobarrettho
committed
Init commit
0 parents  commit ac16221

File tree

10 files changed

+362
-0
lines changed

10 files changed

+362
-0
lines changed

‎.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules
3+
/doc
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
pnpm-debug.log*
14+
15+
# Editor directories and files
16+
.idea
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw?

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# vue3-simple-html2pdf Change Log
2+
3+
All notable changes to this project will be documented in this file.

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2016 Awe
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
# vue3-simple-html2pdf
2+
3+
- Export and auto download PDF using vue3 and html2pdf.js.
4+
- Easy to custom any PDF style because it will be export from real html.
5+
- Can use custom css style for pdf page using vue style.
6+
7+
# Install
8+
9+
```
10+
npm install --save vue3-simple-html2pdf
11+
```
12+
13+
or yarn
14+
15+
```
16+
yarn add vue3-simple-html2pdf
17+
```
18+
19+
# Register component
20+
```
21+
import Vue3SimpleHtml2pdf from "vue3-simple-html2pdf";
22+
Vue.use(Vue3SimpleHtml2pdf);
23+
```
24+
25+
# Use component
26+
27+
```
28+
<vue3-simple-html2pdf
29+
ref="vu3SimpleHtml2pdf"
30+
:options="pdfOptions"
31+
:filename="exportFilename"
32+
>
33+
<h2>HTML Table</h2>
34+
<table>
35+
<tr>
36+
<th>Company</th>
37+
<th>Contact</th>
38+
<th>Country</th>
39+
</tr>
40+
<tr>
41+
<td>Alfreds Futterkiste</td>
42+
<td>Maria Anders</td>
43+
<td>Germany</td>
44+
</tr>
45+
<tr>
46+
<td>Centro comercial Moctezuma</td>
47+
<td>Francisco Chang</td>
48+
<td>Mexico</td>
49+
</tr>
50+
<tr>
51+
<td>Ernst Handel</td>
52+
<td>Roland Mendel</td>
53+
<td>Austria</td>
54+
</tr>
55+
<tr>
56+
<td>Island Trading</td>
57+
<td>Helen Bennett</td>
58+
<td>UK</td>
59+
</tr>
60+
<tr>
61+
<td>Laughing Bacchus Winecellars</td>
62+
<td>Yoshi Tannamuri</td>
63+
<td>Canada</td>
64+
</tr>
65+
<tr>
66+
<td>Magazzini Alimentari Riuniti</td>
67+
<td>Giovanni Rovelli</td>
68+
<td>Italy</td>
69+
</tr>
70+
</table>
71+
72+
<img src="base64 image or url">
73+
74+
<!-- You can loop to display page number as you want -->
75+
<div class="html2pdf__page-number">1</div>
76+
77+
<!-- Break page pdf -->
78+
<div class="html2pdf__page-break"></div>
79+
80+
</vue3-simple-html2pdf>
81+
82+
...
83+
// Props
84+
pdfOptions = {
85+
margin: 15,
86+
image: {
87+
type: 'jpeg',
88+
quality: 1,
89+
},
90+
html2canvas: { scale: 3 },
91+
jsPDF: {
92+
unit: 'mm',
93+
format: 'a4',
94+
orientation: 'p',
95+
},
96+
},
97+
exportFilename: 'my-custom-file.pdf',
98+
99+
...
100+
101+
<style scoped>
102+
table {
103+
font-size: 14px;
104+
text-align: center;
105+
border: 1px solid #ccc;
106+
border-collapse: collapse;
107+
th {
108+
background: #ddd;
109+
font-weight: bold;
110+
}
111+
td,
112+
th {
113+
padding: 8px;
114+
border: 1px solid #ccc;
115+
}
116+
}
117+
... Any other styles here
118+
119+
</style>
120+
```
121+
122+
Call start download pdf
123+
124+
```
125+
this.$refs.vu3SimpleHtml2pdf.download()
126+
```
127+
128+
129+
To break page, use `html2pdf__page-break`
130+
131+
```
132+
<div class="html2pdf__page-break"></div>
133+
```
134+
135+
To add page number, use `html2pdf__page-number`
136+
137+
```
138+
<div class="html2pdf__page-number">{{ pageNumber }}</div>
139+
```
140+
141+
# Sample result
142+
143+
![alt text](/docs/sample.jpg)
144+
145+
# License
146+
147+
The MIT License

‎docs/sample.jpg‎

156 KB
Loading

‎package.json‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "vue3-simple-html2pdf",
3+
"description": "Export to PDF using vue3 and html2pdf.js",
4+
"version": "0.0.4",
5+
"main": "src/index.js",
6+
"author": "abinhho <binh@sango-tech.com>",
7+
"contributors": [
8+
"abinhho <binh@sango-tech.com>"
9+
],
10+
"license": "MIT",
11+
"files": [
12+
"dist",
13+
"src",
14+
"type.d.ts"
15+
],
16+
"types": "./type.d.ts",
17+
"keywords": [
18+
"vue",
19+
"vue html2pdf",
20+
"vue3-simple-html2pdf",
21+
"export pdf"
22+
],
23+
"scripts": {
24+
"build": "npm run build:umd & npm run build:es & npm run build:unpkg",
25+
"build:umd": "rollup --config rollup.config.js --format umd --file dist/vue3-simple-html2pdf.umd.js",
26+
"build:es": "rollup --config rollup.config.js --format es --file dist/vue3-simple-html2pdf.esm.js",
27+
"build:unpkg": "rollup --config rollup.config.js --format iife --file dist/vue3-simple-html2pdf.min.js"
28+
},
29+
"repository": {
30+
"type": "git",
31+
"url": "https://github.com/sango-tech/vue3-simple-html2pdf"
32+
},
33+
"dependencies": {
34+
"html2pdf.js": "^0.9.2"
35+
},
36+
"devDependencies": {
37+
"@babel/core": "^7.1.0",
38+
"@babel/plugin-external-helpers": "^7.0.0",
39+
"@babel/preset-env": "^7.1.0",
40+
"rollup": "^0.66.2",
41+
"rollup-plugin-babel": "^4.0.3",
42+
"rollup-plugin-commonjs": "^9.1.8",
43+
"rollup-plugin-json": "^3.1.0",
44+
"rollup-plugin-node-resolve": "^3.4.0",
45+
"rollup-plugin-replace": "^2.0.0",
46+
"rollup-plugin-uglify-es": "0.0.1",
47+
"rollup-plugin-vue": "^4.3.2",
48+
"vue": "^2.5.17",
49+
"vue-template-compiler": "^2.5.17"
50+
}
51+
}

‎rollup.config.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import resolve from 'rollup-plugin-node-resolve'
2+
import commonjs from 'rollup-plugin-commonjs'
3+
import uglify from 'rollup-plugin-uglify-es'
4+
import babel from 'rollup-plugin-babel'
5+
import vue from 'rollup-plugin-vue'
6+
import replace from 'rollup-plugin-replace'
7+
import json from 'rollup-plugin-json'
8+
9+
export default {
10+
entry: `src/index.js`,
11+
dest: `dist/vue-html2pdf.js`,
12+
format: 'amd',
13+
moduleName: 'VueHtml2pdf',
14+
plugins: [
15+
json(),
16+
vue({
17+
css: true
18+
}),
19+
replace({
20+
'process.env.NODE_ENV': JSON.stringify( 'production' )
21+
}),
22+
resolve({
23+
browser: true,
24+
extensions: ['.vue', '.js', '.json']
25+
}),
26+
commonjs(),
27+
babel({
28+
exclude: 'node_modules/**'
29+
}),
30+
uglify()
31+
],
32+
external: ['vue','html2pdf'],
33+
sourceMap: false
34+
}

‎src/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue3SimpleHtml2pdf from 'vue3-simple-html2pdf/src/vue3-simple-html2pdf'
2+
const install = function (app) {
3+
app.component('Vue3SimpleHtml2pdf', Vue3SimpleHtml2pdf);
4+
}
5+
6+
export default {
7+
install
8+
}

‎src/vue3-simple-html2pdf.vue‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<script>
2+
/* eslint @typescript-eslint/no-var-requires: "off" */
3+
const html2pdf = require('html2pdf.js')
4+
5+
import { h } from 'vue'
6+
7+
export default {
8+
props: {
9+
filename: {
10+
type: String,
11+
default: 'mypdf-file.pdf',
12+
},
13+
readyDownload: {
14+
type: Boolean,
15+
default: false,
16+
},
17+
options: {
18+
type: Object,
19+
default: {
20+
margin: 15,
21+
image: {
22+
type: 'jpeg',
23+
quality: 1,
24+
},
25+
html2canvas: { scale: 3 },
26+
jsPDF: {
27+
unit: 'mm',
28+
format: 'a4',
29+
orientation: 'p',
30+
},
31+
},
32+
},
33+
},
34+
data: function () {
35+
return {}
36+
},
37+
watch: {},
38+
computed: {},
39+
methods: {
40+
download() {
41+
const el = document.getElementById('Vue3SimpleHtml2pdf')
42+
if (!el) {
43+
return
44+
}
45+
46+
html2pdf().from(el).set(this.options).save(this.filename)
47+
},
48+
},
49+
render() {
50+
return h(
51+
'div',
52+
{
53+
class: 'vue3-simple-html2pdf',
54+
id: 'Vue3SimpleHtml2pdf',
55+
},
56+
this.$slots.default()[0]
57+
)
58+
},
59+
}
60+
</script>
61+
<style>
62+
.vue3-simple-html2pdf {
63+
position: relative;
64+
}
65+
.html2pdf__page-number {
66+
position: absolute;
67+
bottom: 10px;
68+
left: 0;
69+
right: 0;
70+
margin: auto;
71+
text-align: center;
72+
}
73+
</style>

‎type.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module 'vue3-simple-html2pdf' {
2+
import { Vue3SimpleHtml2pdf } from 'vue3-simple-html2pdf'
3+
export { Vue3SimpleHtml2pdf }
4+
}

0 commit comments

Comments
 (0)