vue点击按钮自动截图并下载

问题描述

vue中点击按钮自动截图并下载图片点击一个按钮，截取对应区域的界面，才对截取的界面进行裁切并下载

代码实现

1、npm install html2canvas  //下载包
2、import html2canvas from "html2canvas"  //导入包
	components: {
	html2canvas
	},
3.vue页面
	** ref="faultTree是你需要截图的部分**
	<el-button type="primary" @click="clickGeneratePicture">截图</el-button> 
    <div class="contain" ref="faultTree">
      <div class="table_container">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          highlight-current-row
          header-cell-class-name="table-header-class"
          style="width:100%"
        >
          <el-table-column label="序号" width="60" align="center">
            <template slot-scope="scope">
              <span>{{scope.$index+(paginations.pageIndex - 1) * paginations.pageSize + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column property="username" label="用户姓名" width="80" align="center"></el-table-column>
          <el-table-column property="email" label="邮箱地址" width="180" align="center"></el-table-column>
          <el-table-column property="address" label="注册地址" width="210" align="center"></el-table-column>
          <el-table-column property="createTime" label="注册时间" width="180" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
    // data数据
	      loading:false,
	      tableData:[{
	        username:'jiang',
	        email:'112125435@qq.com',
	        address:'杭州',
	        createTime:'2020-10-20',
	      }],
	// 方法
	clickGeneratePicture() {
      // let self = this;
      let ref = this.$refs.faultTree; // 截图区域
      console.log(ref);
      html2canvas(ref, {
        backgroundColor: "#142E48"
      })
      .then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        this.dataURL = dataURL;
        let creatDom = document.createElement("a");
        document.body.appendChild(creatDom);
        creatDom.href = dataURL;
        creatDom.download = "这是刚刚的截图";
        creatDom.click();
      })
      .catch(err => {
        this.$message({
          message: "图片生成失败",
          type: "error"
        });
      });
    }

点击’截图按钮’就会直接下载图片,看效果!