商道如狼道 发表于 2024-6-9 15:31:40

vue实现pdf下载——html2canvas

html2canvas 官方文档https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8https://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页面的方法
methods:{
      downloadPdf () {
            var title = "证书"
            html2Canvas(document.querySelector('#pdfDom'), {
                allowTaint: true
            }).then(function (canvas) {
                let contentWidth = canvas.width
                let contentHeight = canvas.height
                let pageHeight = contentWidth / 592.28 * 841.89
                let leftHeight = contentHeight
                let position = 0
                let imgWidth = 595.28
                let imgHeight = 592.28 / contentWidth * contentHeight
                let pageData = canvas.toDataURL('image/jpeg', 1.0)
                let PDF = new JsPDF('', 'pt', 'a4')
                if (leftHeight < pageHeight) {
                  PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                } else {
                  while (leftHeight > 0) {
                        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight
                        position -= 841.89
                        if (leftHeight > 0) {
                        PDF.addPage()
                        }
                  }
                }
                PDF.save(title + '.pdf')
            })
      }
    }  2.3 页面调用下载方法
https://img-blog.csdnimg.cn/direct/da0ed53f8c2446b498857c705452761f.png
 最终实现结果
    原要下载的页面
https://img-blog.csdnimg.cn/direct/c25bc33b5796477baba0b1287b312dea.png
2. 下载的pdf
https://img-blog.csdnimg.cn/direct/86dd82d8f9764645987abdcc5f6ef41b.png 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: vue实现pdf下载——html2canvas