Vue页面导出为pdf格式并进行下载

1.使用npm下载两个插件

a.将html页面转换成图片

npm install --save html2canvas

b.将图片生成pdf

npm install jspdf  --save

2.在untils文件创建一个叫 htmlPDF.js文件，内容如下

//导出页面为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("#pdfdDom"),{

              useCORS:true,//允许图片跨域截取

              allowTaint:true,

              height:$('#pdfdDom').outerHeight()

        }).then(function(canvas){

            document.body.appendChild(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')

        }).catch(err=>{

            console.log(err);

        })

    }

  }

}

 3.在main.js中注册我们自定义的插件htmlPDF.js

(a)      import htmlPDF from './utils/htmlPDF'

(b)      Vue.use(htmlPDF)

4.在按钮上直接绑定getpdf方法

 

<el-button type="success"  id="calssbut"   style="margin-left:35px;" @click="getpdf()" >导出</el-button>

5.下载的文件名称一定要在data里面