vue实现pdf下载——html2canvas

html2canvas 官方文档

https://html2canvas.hertzen.com/getting-started
html2canvas 的原理是通过遍历DOM树,将每一个HTML元素转化为Canvas对象,并叠加到一起形成一张完整的图片大概PDF文件。
1. 安装插件
   npm install html2canvas jspdf --save
   2.使用（页面已经写好）
2.1 在页面引入html2canvas
   

• import html2Canvas from 'html2canvas'
  
• import JsPDF from 'jspdf'
  

  2.2 创建下载pdf页面的方法

1. methods:{
2.         downloadPdf () {
3.             var title = "证书"
4.             html2Canvas(document.querySelector('#pdfDom'), {
5.                 allowTaint: true
6.             }).then(function (canvas) {
7.                 let contentWidth = canvas.width
8.                 let contentHeight = canvas.height
9.                 let pageHeight = contentWidth / 592.28 * 841.89
10.                 let leftHeight = contentHeight
11.                 let position = 0
12.                 let imgWidth = 595.28
13.                 let imgHeight = 592.28 / contentWidth * contentHeight
14.                 let pageData = canvas.toDataURL('image/jpeg', 1.0)
15.                 let PDF = new JsPDF('', 'pt', 'a4')
16.                 if (leftHeight < pageHeight) {
17.                     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
18.                 } else {
19.                     while (leftHeight > 0) {
20.                         PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
21.                         leftHeight -= pageHeight
22.                         position -= 841.89
23.                         if (leftHeight > 0) {
24.                         PDF.addPage()
25.                         }
26.                     }
27.                 }
28.                 PDF.save(title + '.pdf')
29.             })
30.         }
31.     }

复制代码

 2.3 页面调用下载方法

 最终实现结果
    原要下载的页面

2. 下载的pdf

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。