vue移动端实现下载（截图）功能

前言

通过html2canvas实现截图功能然后保存

简介

html2canvas库允许我们直接在浏览器上拍摄网页或部分网页的“截图”，即浏览器实现截图的功能。

原理

屏幕截图是基于DO的。其基本原理就是读取已经渲染好的DOM元素的结构和样式信息，然后基于这些信息去构建截图，呈现在canvas画布中

操作步骤

安装：npm install html2canvas
引入：import html2canvas from 'html2canvas';
用法：可以只传一个参数，就是你要截图的DOM元素，该函数返回一个Promise对象，在它的then方法中可以获取到绘制好的canvas对象，通过调用canvas对象的toDataURL方法就可以将其转换成图片。html2canvas(document.body).then(function(canvas) {document.body.appendChild(canvas);
});

实际应用

//需要截图区域<div class="box" ref="imgBox">截图的区域</div><el-button @click="downLoad" type="primary">下载</el-button>

 

//保存图片的方法
//即使页面有滚动条也可进行相应配置，实现完整截图。
//有两种方式来实现保存图片：
//1.将URL放到a标签的href属性中，点击超链接来实现图片下载。downLoad() {html2canvas(this.$refs.imgBox, {height: this.$refs.imgBox.scrollHeight,	width: this.$refs.imgBox.scrollWidth,}).then((canvas) => {const link = document.createElement("a"); // 创建一个超链接对象实例link.download = "Button.png"; // 设置要下载的图片的名称link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中link.click(); // 触发超链接的点击事件});},//2.打开一个新的窗口，实现图片保存。downLoad() {html2canvas(this.$refs.imgBox, {height: this.$refs.imgBox.scrollHeight,	width: this.$refs.imgBox.scrollWidth,}).then((canvas) => {let dataURL = canvas.toDataURL("image/png");var blob = this.changeToBlob(dataURL);//获取blob对象var url = URL.createObjectURL(blob);window.open(url);//创建一个新的浏览器窗口对象, 参数指定了该窗口将会打开的地址});},//Base64 to BlobchangeToBlob(dataURL) {var arr = dataURL.split(","),type = arr[0].match(/:(.*?);/)[1],//获取MIME 类型，即image/pngbstr = atob(arr[1]),count = bstr.length,u8arr = new Uint8Array(count);while (count--) {u8arr[count] = bstr.charCodeAt(count);}return new Blob([u8arr], {type: type,});},

结语：

如果你在导出的时候对图表处于未展开状态可以加延时器，如

   download() {this.showAllDataes();//数据展开函数setTimeout(() => {html2canvas(this.$refs.imgBox, {height: this.$refs.imgBox.scrollHeight,width: this.$refs.imgBox.scrollWidth,}).then((canvas) => {const link = document.createElement("a"); // 创建一个超链接对象实例const title = `全市场路演会议${this.filters.date}排行榜`;link.download = title; // 设置要下载的图片的名称link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中link.click(); // 触发超链接的点击事件});}, 1000);},