先npmhtml2canvasjspdf然后在utils中添加htmlToPdf.js//具体代码importhtml2canvasfrom'html2canvas'importJSPDFfrom'jspdf'exportdefault{install(Vue,options){Vue.prototype.ExportSavePdf=function(){varelement=document.getElementById('pdfDom')html2canvas(element,{logging:false}).then(function(canvas){/**jspdf将html转换为pdf而不截断一页显示。总体思路：*1.获取DOM*2.将DOM转换为canvas*3.获取canvas的宽高（稍微大一点）*4.设置pdf的宽高为canvas的宽高*5.将canvas转换为image*6.实例化jspdf，把内容图片放在pdf中（因为内容的宽高和pdf的宽高一样，所以只需要一页，也避免了内容截断的问题）*///获取画布的单位是px像素单位varcontentWidth=1062varcontentHeight=canvas.heightconsole.log('contentWidth',contentWidth)console.log('contentHeight',contentHeight)//canvas转base64图像varpageData=canvas.toDataURL('image/jpeg',1.0)//设置pdfpdf的大小应该以pt为单位。1pt/1px=0.75pt=(px/scale)*0.75//2对于上述比例缩放2倍varpdfX=((contentWidth+10)/2)*0.75varpdfY=((contentHeight+20)/2)*0.75//20为底部空白console.log(pdfX,pdfY,'pdfx')//设置内容图片的大小，img为pt单位varimgX=pdfX-20//SetmarginvarimgY=(contentHeight/2)*0.75//这里content图片不用留空白//初始化jspdf第一个参数方向：默认是垂直，第二个参数设置长度单位pdf内容图片使用的是pt，第三个参数是PDF的大小，单位是ptvarPDF=newJSPDF('','pt',[pdfX,pdfY])//添加内容图片pdf，因为内容宽高不同，pdf的宽高是一样的，只需要一页，位置0,0PDF.addImage(pageData,'jpeg',10,10,imgX,imgY)PDF.save('download.pdf')})}}}3.main.js全局注册importhtmlToPdffrom'../src/utils/htmlToPdf'Vue.use(htmlToPdf)4.在vue组件中使用
