需求

收到需求需要把教育系统生成的课程清单给用户下载下来，还要盖上公章，分析一下

首先要生成一个课程清单 =》这个很简单，后台接口返回即可
然后按照这个清单生成一张图片 =》这个canvas就可以作为图片
然后就是增加一个a标签，获取到图片的url然后模拟点击下载

难点

现在问题就是我们要怎么弄个canvas，如果自己手画一个canvas可是很麻烦的，更别说画一个表格canvas，等做出来怕是别人锤死，不用慌，我们有个库可以把你的标签元素生成canvas标签元素，那就是html2canvas，我们首先安装这个库：

npm install html2canvas --save

然后我们看看使用：

html2canvas(ele, options).then(canvas => { console.log(canvas) })

主要就是上面这个函数，接收两个参数，然后返回一个promise，.then之后就是一个canvas节点

ele：这个就是我们获取到的待会要生成canvas标签的原始标签
options：这个是配置项，就是配置canvas的一些参数，详细参考

还有个问题就是即使图片现在生成出来了，我要怎么去下载呢

获取生成的canvas的url：const url = canvas.toDataURL('imgage/png');
创建一个a标签：const a = document.createElement('a');
创建一个点击事件：const event = new MouseEvent('click');
把获取到的url设置到a标签的url：a.href = url;
设置a标签触发刚刚创建的event：a.dispatchEvent(event);

这样就会弹出下载弹框

具体例子

<template>
  <div id="home">
<!--    点击事件-->
    <h1 @click="createPng">点击下载</h1>
<!--    目标div-->
    <div id="test">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// 引入html2canvas
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      // 演示数据
        tableData: [
            {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    };
  },
  methods: {
    // 生成并下载
    createPng() {
      const ele = document.querySelector('#test'); // 获取目标表格div
      const options = { // 设置了canvas的宽度，我就演示一下，实际你要截取整个目标div就不用设置
        width: '100'
      }
      html2canvas(ele, options).then(canvas => { // 生成canvas标签
        const url = canvas.toDataURL('imgage/png'); // 获取canvas的url
        const a = document.createElement('a'); // 创建a标签
        const event = new MouseEvent('click'); // 创建点击事件
        a.download = 'kechengqingdan'; // 设置一个名称
        a.href = url; // 设置a标签的href属性为刚刚获取url，很重要
        a.dispatchEvent(event); // 点击a标签下载图片
      })
    }
  }
};
</script>

文档参考

html2canvas

用html2canvas把标签生成canvas图片并下载

需求

难点

具体例子

文档参考