Vue纯前端导出数据到Excel电子表格

参考：https://segmentfault.com/a/1190000012117303#comment-area

使用Vue实现Excel文件的导入与导出_vue excel导入-CSDN博客

Vue项目中如何实现表格数据的导出和导入-Vue.js-PHP中文网

一、安装依赖（前面基本一样）通用

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

方法一↓ 推荐

<div>
    <el-button type="primary" @click="exportExcel()">导出</el-button>
    <el-table
        ref="pageTable"
        :data="tableData"
        height="548"
        id="out-table2"
      >
        <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>
<script>
import XLSX from "xlsx";
import FileSaver from "file-saver";

methods: {
    // 数据写入Excel
    exportExcel() {
      const fix = document
        .querySelector("#out-table2")
        .querySelector(".el-table__fixed");
      const wb = XLSX.utils.table_to_book(
        document.querySelector("#out-table2").removeChild(fix),
        { raw: true }
      );
      const timeStr = moment(new Date()).format("YYYYMMDD");
      const fileName = "工作动态统计" + timeStr + ".xlsx";
      document.querySelector("#out-table2").appendChild(fix);
      /* 获取二进制字符串作为输出 */
      const wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          fileName
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
}
</script>

方法二 ↓

一、安装依赖（前面基本一样）通用

二、下载两个所需要的js文件Blob.js和 Export2Excel.js。

这里贴下下载地址：

http://xiazai.jb51.net/201708/yuanma/Export2Exce_jb51.rar

三、src目录下新建vendor文件夹，将Blob.js和 Export2Excel.js放进去。

四、更改webpack.base.conf.js配置

在resolve的alias： 
'vendor': path.resolve(__dirname, '../src/vendor')

五、在.vue文件中

<template>
  <div class="OtherSettings_2">
    <h3>xxx列表</h3>
    <div class="table">
      <div class="export_excel">
       <button @click="export2Excel">导出Excel</button>
      </div>
      <table border="1" cellspacing="0" style="border-collapse:collapse;">
        <tr>
          <td>项目编号</td>
          <td>项目名称</td>
          <td>合同编号</td>
          <td>合同名称</td>
          <td>版本</td>
          <td>权益人</td>
          <td>过期时间</td>
        </tr>
        <tr v-for="(item,index) in coundHostList" :key="index">
          <td>{{item.number}}</td>
          <td>{{item.name}}</td>
          <td>{{item.htnumber}}</td>
          <td>{{item.htname}}</td>
          <td>{{item.version}}</td>
          <td>{{item.qyperson}}</td>
          <td>{{item.extime}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

script部分

data(){
  return{
    coundHostList:[
        {
          number:'0001',
          name:'商品1',
          htnumber:'001',
          htname:'合同1',
          version:'1.0.0.1',
          qyperson:'张三',
          extime:'2020-03-13'
      },
       {
          number:'0002',
          name:'商品2',
          htnumber:'002',
          htname:'合同2',
          version:'1.0.0.2',
          qyperson:'赵四',
          extime:'2020-03-15'
      },
    ]
  }
  },
  methods:{
    formatJson(filterVal, jsonData) {
    　　　　return jsonData.map(v => filterVal.map(j => v[j]))
    　　},
    export2Excel() {
    　　　　require.ensure([], () => {
    　　　　　　const { export_json_to_excel } = require('../../../vendor/Export2Excel')
    　　　　　　const tHeader = ['项目编号','项目名称','合同编号','合同名称','版本','权益人','过期时间'];
    　　　　　　const filterVal = ['number', 'name', 'htnumber', 'htname','version', 'qyperson', 'extime', ];
    　　　　　　const list = this.coundHostList;
    　　　　　　const data = this.formatJson(filterVal,list);
    　　　　　　export_json_to_excel(tHeader, data, '商品管理列表');
    　　　　})
    　 },
  },

 这里说明一下：

1、export2Excel()中require的路径因个人项目结构不同可能需要单独调整，如果报module not found '../../Export2Excel.js'之类请自行修改路径。

2、tHeader是每一栏的名称，需手动输入。filterVal是data中list的key值，也是要自己写的。

const { export_json_to_excel } = require('../../../vendor/Export2Excel') //路径问题
const tHeader = ['项目编号','项目名称','合同编号','合同名称','版本','权益人','过期时间'];

4、这里记得要与data里面的list名称对应 

5、这里可定义导出的excel文件名

export_json_to_excel(tHeader, data, '云主机列表');