页面DOM导出PDF
Nginx设置允许跨域
1 | location /static { |
也就是在location下添加
1 | add_header 'Access-Control-Allow-Origin' '*'; |
添加模块引用
第一个将页面html转换成图片
1 | npm install html2canvas --save |
第二个将图片生成pdf
1 | npm install jspdf --save |
未使用VUE
1 | /* eslint-disable */ |
注意
document.documentElement.scrollTop = 0;
是为了解决外层页面滚动时获取的canvas偏移的问题
引用
1 | import htmlToPdf from "@/assets/js/htmlToPdf"; |
调用
1 | htmlToPdf.downloadPDF( |
使用VUE
1 | import html2Canvas from 'html2canvas' |
main.js文件中添加如下代码:
1 | import htmlToPdf from '@/utils/htmlToPdf' |
然后就可以在要导出pdf文件组件里面添加 如下 代码即可导出
1 | this.getPdf('resumeId',name) |
Canvas转图片下载
也可以使用html2canvas获取canvas后 转为图片下载
1 | let url = canvas.toDataURL("image/png"); |