vue实现pdf导出解决生成canvas模糊等问题(推荐)

1、vue实现pdf导出解决生成canva模糊等问题（推荐）最近公司项目需要，利用vue实现pd导出，从而保存到本地打印出来，说起来好像也很容易,具体要怎么实现呢？、我们要添加两个模块第一个将页面转换成图片npnsasave第二个将图片生成pdfnpnsspdfsavecanvas、定义全局函数创建一个文件在指定位置我个人习惯放在导出页面为格式importanvasfromhtml2canvasimportJsPDfjspdfexportdefauinstalueptions)ueppegetPdf=functnvae=sle2Canvas(documenueelector(#pdfDom)aai

2、nt:ruethen(functioncanvasecntentWidtcanvaswidthecntentHeigcanvaseepaeHeigcnendeeftHeigcneneightepsn=egWidegHeigcnendepaeDatacanvasaaURL(image/jpegenewspaf(leftHeigpaeepaaeageeDacontendf.addIsele(DF.addeftHeigeftmaeighte(=paataeHepositionif(leftHPDF.addeiasavepdf、在a中使用我们定义的函数文件。importueusedffcpnenhtm

3、lToPdf)/utils/htmlToPdf、在需要的导出的页面调用我们的e方法即可dvcassd=pdfDomstyle=paddingppac给自己需要导出的u部分定义为pdfD此部分将就是pdf显示的部分buttontype=buoncassn导出pm:clicexpordefaultdatareturn页面导出格件名und-coetPdffff到这里大家会发现功能是可以实现了，但是会有个致命的问题，导出来的pd打印出来还是比较模糊的，那么，针对这个问题，我们要怎么解决呢？我们的思路是：将canvas的属性width和height属性放大为2倍，最后将canvas的css样式width

4、和height设置为原来1倍的大小即可，也就是，先将canvas高分辨率输出，再来压缩导出打印，即可，废话不多说，完整代码如下：/导出页面为PDF格式importhtml2Canvasfromhtml2canvasimportJsPDFfromjspdfexportdefaultinstall(Vue,options)Vtotype.getPdf=function(dom,title)vartitle=titlevarc=document.createElement(canvas)varopts=scale:2,canvas:c,logging:true,width:documen

5、t.querySelector(dom).width,height:document.querySelector(dom).height;c.width=document.querySelector(dom).width*2c.height=document.querySelector(dom).height*2c.getContext(2d).scale(2,2);html2Canvas(document.querySelector(dom),opts).then(function(canvas)letcontentWidth=canvas.widthletcontentHeight=can

6、vas.heightletpageHeight=contentWidth/592.28*841.89letleftHeight=contentHeightletposition=0letimgWidth=595.28letimgHeight=592.28/contentWidth*contentHeightletpageData=canvas.toDataURL(image/jpeg,1.0)letPDF=newJsPDF(,pt,a4)if(leftHeight0)PDF.addImage(pageData,JPEG,0,position,imgWidth,imgHeight)leftHeight-=pageHeightposition-=841.89if(leftHeight0)PDF.addPage()PDF.save(title+.p