vue导出pdf格式文件

一、安装所需要的依赖

1.将页面html转换成图片
npm install --save html2canvas
2.将图片转换成gif
npm install jspdf --save

二、定义全局函数，创建一个htmlToPdf.js文件在指定位置（看个人习惯，一般都在'src/components/utils/htmlToPdf'）

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install(Vue, options){
    Vue.prototype.getPdf = function(){
      var title = this.htmlTitle
      html2Canvas (document.querySelector('#pefDom'),{
        allowTait:true
      }).then(function (canvas){
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.68 * 841.89
        let leftHeight = contentHeight
        let postion = 0
        let imgWidth = 595.68
        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,postiotion,imgWidth,imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if(leftHeight > 0){
              PDF.addPage()
            }
          }  
        }
        PDF.save(title + '.pdf')
      })
    } 
  }
}

三、在main.js中使用我们定义的函数文件。

import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)

四、在需要的导出页面 调用我们的getPdf方法即可

<div class="row"  id="pdfDom" style="padding-top:55px;background-color:#fff">
  //给自己需要导出的UI部分 定义id为'pdfDom'此部分将是pdf显示的部分
</div>
<button type="button" class="btn btn-parimary" @click="getPdf()"></button>
......
export default{
  data(){
    return {
      htmlTitle:'页面导出PDF文件名'
    }
  } 
}