使用前端生成 PDF 的注意事项

这里主要使用前端来生成 pdf, 但是由于浏览器安全性的问题会导致浏览器不允许读取图片, 以下这几个步骤则可以生成 pdf

前端框架

jspdf-html2canvas

https://github.com/johnnywang1994/jsPDF-html2canvas

  • 缺点: 对文字进行切割

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
try {
html2PDF(document.getElementById('exporter'), {
jsPDF: {
format: 'a4',
},
html2canvas: {
useCORS: true
},
margin: {
top: 20,
// right: 20,
bottom: 20,
// left: 20,
},
imageType: 'image/jpeg',
output: '导出文件.pdf'
});
} catch (e) {
this.$toast.error('导出PDF失败' + e.message);
}

html2pdf.js

https://github.com/eKoopmans/html2pdf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
try {
let element = document.getElementById('exporter');
return html2pdf().from(element).set({
jsPDF: {
format: 'a4',
},
html2canvas: {
useCORS: true
},
pagebreak:{mode: ['avoid-all']},
enableLinks: false,
margin: [0, 0, 20, 0],
image: { type: 'jpeg', quality: 0.98 },
filename: '导出文件.pdf'
}).save();
} catch (e) {
console.log(e);
this.$toast.error('导出PDF失败' + e.message);
}

相关配置

1. 允许图片跨域访问

1
2
3
location ~* \.(jpeg|png|gif|jpg)$ {
add_header Access-Control-Allow-Origin *;
}

2. 图片添加跨域属性

1
<img crossorigin="anonymous" src="url..." />

3. PDF 工具的 html2canvas 开启 CORS

1
2
3
4
5
6
7
html2PDF(document.getElementById('exporter'), {
// ...
html2canvas: {
useCORS: true
},
// ...
});

语雀镜像 : 使用前端生成 PDF 的注意事项 ,点此 提问

使用前端生成 PDF 的注意事项

https://wulicode.com/web/vlc8bt.html

作者

Duoli

发布于

2022-07-14

更新于

2022-12-08

许可协议

评论