vue中table表格点击下载为图片格式

vue中table表格点击下载为图片格式

页面布局：

点击下载：

1.下载
npm install --save html2canvas

2.导入需要引用的页面

import html2canvas from "html2canvas";

3.页面引用

<template>
  <div style="min-height: 450px;">
    <button @click="downloadResult('表格名称')">下载</button>
    <div style="width: 100%;padding:10px">
      <table
        align="center"
        width="100%"
        class="table xunw_table_form"
        border="1"
        id="table"
      >
        <tbody>
          <tr>
            <th colspan="10" class="zxstyle ly">
              计算机专业（专业代码：456454）
            </th>
          </tr>
          <tr>
            <th class="zxstyle">课程类型</th>
            <th class="zxstyle">序号</th>
            <th class="zxstyle">课程代码</th>
            <th class="zxstyle">课程名称</th>
            <th class="zxstyle">学分</th>
            <th class="zxstyle">教材名称</th>
            <th class="zxstyle">主编</th>
            <th class="zxstyle">出版社</th>
            <th class="zxstyle">版次</th>
            <th class="zxstyle">备注</th>
          </tr>
          <tr v-for="(item, index) in sjList" :key="item.id">
            <td
              align="center"
              :rowspan="item.kclxspan"
              :class="{ hidden: item.kclxdis }"
            >
              {{ item.kclx }}
            </td>
            <td>{{ index + 1 }}</td>
            <td>{{ item.kcdm }}</td>
            <td>{{ item.kcmc }}</td>
            <td>{{ item.xf }}</td>
            <td>{{ item.cjmc }}</td>
            <td>{{ item.zb }}</td>
            <td>{{ item.cbs }}</td>
            <td>{{ item.bc }}</td>
            <td>{{ item.bz }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import html2canvas from "html2canvas";

export default {
  name: "essential",
  data: function() {
    return {
      sjList: [
        {
          kclx: "公共课",
          kcdm: "000015",
          kcmc: "语文",
          xf: "14",
          cjmc: "语文",
          zb: "张宏",
          cbs: "北京大学出版社",
          bc: "2025",
          bz: "无"
        },
        {
          kclx: "公共课",
          kcdm: "000013",
          kcmc: "英语",
          xf: "52",
          cjmc: "英语",
          zb: "张近东",
          cbs: "北京大学出版社",
          bc: "2027",
          bz: "无"
        },
        {
          kclx: "公共课",
          kcdm: "000019",
          kcmc: "数学",
          xf: "14",
          cjmc: "数学",
          zb: "阿斯蒂",
          cbs: "北京大学出版社",
          bc: "2028",
          bz: "无"
        },
        {
          kclx: "考核课",
          kcdm: "000056",
          kcmc: "物理",
          xf: "11",
          cjmc: "物理",
          zb: "萨蒂",
          cbs: "北京大学出版社",
          bc: "2029",
          bz: "无"
        },
        {
          kclx: "考核课",
          kcdm: "000045",
          kcmc: "化学",
          xf: "14",
          cjmc: "化学",
          zb: "名点",
          cbs: "北京大学出版社",
          bc: "2027",
          bz: "无"
        },
        {
          kclx: "公共课",
          kcdm: "000085",
          kcmc: "生物",
          xf: "36",
          cjmc: "生物",
          zb: "张炯",
          cbs: "北京大学出版社",
          bc: "2028",
          bz: "无"
        }
      ]
    };
  },
  created: function() {
    this.checkSameData(this.sjList);
    this.combineCell();
  },
  methods: {
    dataURLToBlob(dataurl) {
      //ie 图片转格式
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    downloadResult(name) {
      let canvasID = document.querySelector("#table");
      let a = document.createElement("a");
      html2canvas(canvasID).then(canvas => {
        let dom = document.body.appendChild(canvas);
        dom.style.display = "none";
        a.style.display = "none";
        document.body.removeChild(dom);
        let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
        a.setAttribute("href", URL.createObjectURL(blob));
        a.setAttribute("download", name + ".png");
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
      });
    },
    printOut(name) {
      // 个人观察只是截取可见范围以及以下的区域，所以先将滚动条置顶
      $(window).scrollTop(0); // jQuery 的方法
      document.body.scrollTop = 0; // IE的
      document.documentElement.scrollTop = 0; // 其他
      this.downloadResult(name);
    },
    // 数据处理相同的放在一起
    checkSameData(sjList) {
      let cache = {}; //存储的是键是kclx 的值，值是kclx 在indeces中数组的下标
      let indices = []; //数组中每一个值是一个数组，数组中的每一个元素是原数组中相同kclx的下标
      sjList.map((item, index) => {
        let kclx = item.kclx;
        let _index = cache[kclx];
        if (_index !== undefined) {
          indices[_index].push(index);
        } else {
          cache[kclx] = indices.length;
          indices.push([index]);
        }
      });
      let result = [];
      indices.map(item => {
        item.map(index => {
          result.push(sjList[index]);
        });
      });
      this.sjList = result;
    },

    // 合并
    combineCell() {
      let list = this.sjList;
      for (let field in list[0]) {
        var k = 0;
        while (k < list.length) {
          list[k][field + "span"] = 1;
          list[k][field + "dis"] = false;
          for (var i = k + 1; i <= list.length - 1; i++) {
            if (list[k][field] == list[i][field] && list[k][field] != "") {
              list[k][field + "span"]++;
              list[k][field + "dis"] = false;
              list[i][field + "span"] = 1;
              list[i][field + "dis"] = true;
            } else {
              break;
            }
          }
          k = i;
        }
      }
      return list;
    }
  }
};
</script>
<style scoped>
.hidden {
  display: none;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
}
table td,
table th {
  border: 1px solid #cad9ea;
  color: #666;
  height: 30px;
}
table thead th {
  background-color: #cce8eb;
  width: 100px;
}
table tr:nth-child(odd) {
  background: #fff;
}
table tr:nth-child(even) {
  background: #f5fafa;
}
</style>