VUE-cli兼容的json数据导出到excel表格

页面表格导出到excel表格

本方法也适用于json数据导出到excel表格，因为vue的表格数据是支持json数据直接引入的

1_安装依赖

// 安装 file-saver 和 xlsx
cnpm i file-saver xlsx -s;

就在代码总文件夹下打开一个终端，然后输入上方指令，等待安装成功即可。

2_在要用的组件用中引入

// 一般在script标签的开头
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

编写表格

<el-table id="exportTable" :data="jsontable" v-show="false" style="width: 100%">
 <el-table-column align="center" label="人员姓名" prop="name" width="150"></el-table-column>
 <el-table-column align="center" label="设备SN号" prop="devnos" width="150"></el-table-column>
 <el-table-column align="center" label="部门" prop="orgname" width="150"></el-table-column>
</el-table>

使用的是element-ui框架：
:data="jsontable"中data绑定的就是json数据
id是需要的，之后需要选中表格进行绑定
由于这个表格不打算放在页面上所以v-show属性设置为false

书写方法

// 为html中的按钮的click属性绑定此方法即可
JsontoExcel () {
      let wb = XLSX.utils.table_to_book(document.querySelector('#exportTable'), { raw: true }); // exportTable就是绑定的表格id
      let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出人员数据.xlsx');
        this.$notify.success({
          title: "成功",
          message: "请选择保存路径和文件名称"
        });
      } catch (e) {
        if (typeof console !== 'undefined') { console.log(e, wbout) }
      }
      return wbout
    },

来源

本文内容参考以下网址：
https://www.jianshu.com/p/61d95a8c149c