vue-front-end导出pdf并压缩zip

.table-class{background-color:#fff;宽度：1000px；保证金：自动；填充：40px；框大小：边框框；.name-style{文本对齐：居中；字体大小：20px；字体粗细：粗体；底部边距：20px；}}.table-style{border-collapse:collapse;宽度：100%；文本对齐：居中；td,th{填充:10px;字体大小：15px；边框：1px纯黑色；}.td-bg{背景：#ccc;}}}}}}}}}}}}}}需求1.前端自定义html模板，导出pdf2.导出多张pdf压缩成一个文件zip原理1.html2Canvas将html模板转换成canvas2.将canvas转换成img图片3.将生成的图片添加到pdf中使用To插件html2canvasjspdfjszipfile-saver模板.table-class{background-color:#fff;宽度：1000px；保证金：自动；填充：40px；框大小：边框框；.name-style{文本对齐：居中；字体大小：20px；字体粗细：粗体；底部边距：20px；}}.table-style{border-collapse:collapse;宽度：100%；文本对齐：居中；td,th{填充:10px;字体大小：15px；边框：1px纯黑色；}.td-bg{背景：#ccc;}}}}}}}}}}}}}}异步导出异步导出会议（类型）{//类型：'1'选择导出'所有'：导出所有尝试{this.allLoading=trueletselectedData=[]if（type==='1'){constids=this.multipleSelection.map(el=>el.id)selectedData=awaitthis.getMeetingAll(ids)}elseif(type==='all'){selectedData=awaitthis.getMeetingAll()}this.loadingText='拼命导出...'constzip=newJSZip()constpromises=[]this.isShowPdf=truefor(leti=0;i{for(leti=0;i1){zip.generateAsync({type:'blob'}).then(content=>{FileSaver.saveAs(content,'销售管理平台会议纪要.zip')})}}).finally(()=>{this.allLoading=falsethis.loadingText='请求数据'})}catch(e){this.allLoading=falsethis.loadingText='requestingdata'thrownewError(e)}},publicpackagefunctiontogetpdf//exportpdfimporthtml2Canvasfrom'html2canvas';从“jspdf”导入JsPDF；exportdefault{getPdf:(el,pdfName)=>{//滚轮滑动导致，主要是html2canvas根据body截屏。如果内容的高度高于body，就会出现这样的问题//解决方法：（生成截图前，先将滚动条转为top）window.pageYoffset=0;文档.documentElement.scrollTop=0;文档.body.scrollTop=0;returnnewPromise((resolve,reject)=>{//当点击保存图片时，此时要保存的资源更多，导致模块没有加载满，已经生成截图//解决方法：(delay)setTimeout(()=>{//这句话很重要html2Canvas(el,{scale:4,dpi:300,useCORS:true,//allowTaint:true}).then((canvas)=??>{constcontentWidth=canvas.width;constcontentHeight=canvas.height;constpageHeight=(contentWidth/592.28)*841.89;letleftHeight=contentHeight;//letposition=0;constimgWidth=595.28;constimgHeight=(592.28/contentWidth)*contentHeight;constpageData=canvas.toDataURL('image/jpeg',);constPDF=newJsPDF('','pt','a4');if(leftHeight0){PDF.addImage(pageData,'JPEG',0,position,imgWidth,imgHeight);leftHeight-=pageHeight;头寸-=841.89；//避免添加空白页if(leftHeight>0){PDF.addPage();}}}resolve({PDF,名称:pdfName});}).catch((e)=>{拒绝(e);});},500);});},};添加到zip时遇到的问题，获取pdf的内容zip.file(`${name}-${newDate().getTime()}.pdf`,PDF.output('blob'));//第二个参数PDF.outputzip中加入('blob')时，会覆盖同名文件//通过在文件名中加入时间戳来解决zip.file(`${name}-${newDate().getTime()}.pdf`,PDF.output('blob'));//`${name}-${newDate().getTime()}.pdf`