vue怎么将html页面生成高清晰pdf文件
vue怎么将html页面生成高清晰pdf文件
本文小编为大家详细介绍“vue怎么将html页面生成高清晰pdf文件”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue怎么将html页面生成高清晰pdf文件”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
需要借助html2canvas和jspdf这两个插件
首先是将页面用html2canvas生成base64的图片，再用jspdf将图片插入到pdf
效果图如下
createImage(){//生成图片->pdflet_this=this;//----此处是解决页面带滚动条的时候截图不全问题window.pageYoffset=0;document.documentElement.scrollTop=0;document.body.scrollTop=0;'//----------------------------------------letcanvas=document.createElement("canvas");letcontext=canvas.getContext("2d");let_articleHtml=document.getElementById('imageTofile');let_w=_articleHtml.clientWidth;let_h=_articleHtml.clientHeight;//-----这里解决生成的pdf不清晰的问题先放大3倍----后面再缩小3倍letscale=3;canvas.width=_w*scale;canvas.height=_h*scale;context.scale(scale,scale);letopts={scale:1,width:_w,height:_h,canvas:canvas,useCORS:true};(window.html2canvas||html2canvas)(_articleHtml,opts).then(canvas=>{//IOS13.4无效解决和{(intermediatevalue)(intermediatevalue)}isnotafunction+;_this.createPdfAll(canvas,scale);});},
我这里直接将整个的img插入到pdf,并未截断分页，因为截断的话需要调整，不太友好，不然会把文字从中间位置截断
createPdfAll(canvas,scale){//生成图片->pdf//-----------宽高缩小3倍---------------------letcontentWidth=canvas.width/scaleletcontentHeight=canvas.height/scale//--------------------letpdf=newjsPDF('','pt',[contentWidth,contentHeight+50])//此处加50是pdf最后离底部的空白距离。根据需要自行调节letpageData=canvas.toDataURL('image/jpeg',1.0);//这里只生成了一页的pdf，并未截断，需要截断的话在此处操作pdf.addImage(pageData,'JPEG',0,0,contentWidth,contentHeight)//这里是将pdf的流文件---》file文件letfilename='question.pdf';letdatauri=pdf.output('dataurlstring');letfile=this.dataURLtoFile(datauri,filename);//以文件的形式上传给服务器this.uploadImg(file)},
流文件转成file
dataURLtoFile(dataurl,filename){vararr=dataurl.split(',');varmime=arr[0].match(/:(.*?);/)[1];varbstr=atob(arr[1]);varn=bstr.length;varu8arr=newUint8Array(n);while(n--){undefinedu8arr[n]=bstr.charCodeAt(n);}//转换成file对象returnnewFile([u8arr],filename,{type:mime});//转换成成blob对象//returnnewBlob([u8arr],{type:mime});},
种方案纯前端实现，无需后端配合，并且页面还原度比较高，对于pdf操作要求不高的需求，还是比较合适的解决方案。
缺点就是无法复制，对pdf操作不大兼容
读到这里，这篇“vue怎么将html页面生成高清晰pdf文件”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注恰卡编程网行业资讯频道。
