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 Blob
 changeToBlob(dataURL) {
    var arr = dataURL.split(","),
      type = arr[0].match(/:(.*?);/)[1],//获取MIME 类型，即image/png
      bstr = 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);
    },