当前位置: 首页 > Web前端 > vue.js

页面部分截图保存到本地

时间:2023-03-31 17:46:39 vue.js

需求是点击SaveImage将页面的echarts图表和对应的form生成图片保存到本地包:html2canvasinstallnpmihtml2canvas@1.0.0-rc.4useimporthtml2canvasfrom'html2canvas';generateShareImage(){constcanvas=document.createElement("canvas")letcanvasBox=document.getElementById('imageWrapper')constwidth=canvasBox.offsetWidthconstheight=canvasBox.offsetHeightcanvas.width=width*2canvas.height=height*2//生成页面模糊时,可以放大一定倍数,通过调整canvas的宽高可以增加清晰度//constcontext=canvas.getContext("2d");//context.scale(1.5,1.5);constoptions={backgroundColor:null,canvas:canvas,useCORS:true};html2canvas(canvasBox,options).then((canvas)=??>{letdataURL=canvas.toDataURL("image/png");//下载this.downloadImage(dataURL);//显示varshare=document.getElementById('shareImg');share.src=dataURL;})},downloadImage(url){letlink=document.createElement("a");link.href=网址;link.setAttribute("下载","截图.png");链接.点击();}完成