html转为pdf进行下载

发表于 | 分类于


1、添加两个模块html2canvas和jspdf
1
2
（1）npm install --save html2canvas（将页面html转换成图片）
（2）npm install --save jspdf（将图片生成pdf）
2、创建一个htmlToPdf.js文件在指定位置.我个人习惯放在(‘src/components/utils/htmlToPdf.js’),内容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import html2Canvas from 'html2canvas'  
import JsPDF from 'jspdf'  
export default{  
  install (Vue, options) {  
    Vue.prototype.getPdf = function () {  
      var title = this.htmlTitle  
      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')  
      }  
      )  
    }  
  }  
}
3、在main.js中使用我们定义的函数文件
1
2
import htmlToPdf from '@/components/utils/htmlToPdf'  
Vue.use(htmlToPdf)
4、在页面中添加
1
2
3
4
5
6
7
8
9
10
11
<div class="row" id="pdfDom">  
      这里边的内容就是pdf的内容
</div>  

<button type="button" @click="getPdf()">导出PDF</button>

data () {
    return {
      htmlTitle:"qwerdf"//这个是pdf文件的名字
    }
  }
5、外链

html2pdf：链接