Vue将页面导出为图片或者PDF
本文实例为大家分享了Vue导出页面为PDF格式的具体代码，供大家参考，具体内容如下
导出为图片
1.将页面html转换成图片
npminstallhtml2canvas--save
2.在需要导出的页面引入
importhtml2canvasfrom'html2canvas';
在methods中添加方法
dataURLToBlob(dataurl){//ie图片转格式
vararr=dataurl.split(','),mime=arr[0].match(/:(.*?);/)[1],
bstr=atob(arr[1]),n=bstr.length,u8arr=newUint8Array(n);
while(n--){
u8arr[n]=bstr.charCodeAt(n);
}
returnnewBlob([u8arr],{type:mime})
},
downloadResult(name){
letcanvasID=document.body
leta=document.createElement('a');
html2canvas(canvasID).then(canvas=>{
letdom=document.body.appendChild(canvas);
dom.style.display="none";
a.style.display="none";
document.body.removeChild(dom);
letblob=this.dataURLToBlob(dom.toDataURL("image/png"));
a.setAttribute("href",URL.createObjectURL(blob));
a.setAttribute("download",name+".png")
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
});
},
printOut(name){
//个人观察只是截取可见范围以及以下的区域，所以先将滚动条置顶
$(window).scrollTop(0);//jQuery的方法
document.body.scrollTop=0;//IE的
document.documentElement.scrollTop=0;//其他
this.downloadResult(name)
},
导出为PDF
1.将页面html转换成图片
npminstallhtml2canvas--save
2.将图片生成pdf
npminstalljspdf--save
3.在需要导出的页面引入
importhtml2canvasfrom'html2canvas'; importJsPDFfrom'jspdf'
在methods中添加方法
printOut(name){
letshareContent=document.body,//需要截图的包裹的（原生的）DOM对象
width=shareContent.clientWidth,//获取dom宽度
height=shareContent.clientHeight,//获取dom高度
canvas=document.createElement("canvas"),//创建一个canvas节点
scale=2;//定义任意放大倍数支持小数
canvas.width=width*scale;//定义canvas宽度*缩放
canvas.height=height*scale;//定义canvas高度*缩放
canvas.style.width=shareContent.clientWidth*scale+"px";
canvas.style.height=shareContent.clientHeight*scale+"px";
canvas.getContext("2d").scale(scale,scale);//获取context,设置scale
letopts={
scale:scale,//添加的scale参数
canvas:canvas,//自定义canvas
logging:false,//日志开关，便于查看html2canvas的内部执行流程
width:width,//dom原始宽度
height:height,
useCORS:true,//【重要】开启跨域配置
};
html2Canvas(shareContent,opts).then(()=>{
varcontentWidth=canvas.width;
varcontentHeight=canvas.height;
//一页pdf显示html页面生成的canvas高度;
varpageHeight=(contentWidth/592.28)*841.89;
//未生成pdf的html页面高度
varleftHeight=contentHeight;
//页面偏移
varposition=0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
varimgWidth=595.28;
varimgHeight=(592.28/contentWidth)*contentHeight;
varpageData=canvas.toDataURL("image/jpeg",1.0);
varPDF=newJsPDF("","pt","a4");
if(leftHeight0){
PDF.addImage(pageData,"JPEG",0,position,imgWidth,imgHeight);
leftHeight-=pageHeight;
position-=841.89;
if(leftHeight>0){
PDF.addPage();
}
}
}
PDF.save(name+".pdf");//这里是导出的文件名
});
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。