Export2Excel.js

可控性比较好，可以按自己的需求修改源码。
使用三个插件，分别是：file-saver、xlsx、script-loader。

安装：

  1. npm install -S file-saver xlsx
  2. npm install -D script-loader
  • file-saver ：保存文件用
  • xlsx：xlsx核心
  • script-loader：上面的库不支持 import 引入，需要 script-loader 来挂载到全局环境下

下载 Blob.js 和 Export2Excel.js ，在 src 下放入这两个 JS 文件并引用。我这里放在了 src/plugins/vendor 目录下。
Export2Excel.js 主要提供了 export_table_to_excel 和 export_json_to_excel 方法给我们导出成 excel 。我用的是传递 json 格式的方法，比较好控制数据。

另外，因为不支持导出多个 sheets ，所以我修改了一下 export_json_to_excel 方法：

  1. export function export_json_to_excel(th, jsonData, defaultTitle, sheets) {
  2.     /* original data */
  3.     var wb = new Workbook();
  4.     var ws_name = "";
  5.     var ws;
  6.     for (let i = 0; i < sheets.length; i++) {
  7.       var data = jsonData[i];
  8.       data.unshift(th[i]);
  9.       ws_name = sheets[i];
  10.       ws = sheet_from_array_of_arrays(data);
  11.       /* add worksheet to workbook */
  12.       wb.SheetNames.push(ws_name);
  13.       wb.Sheets[ws_name] = ws;
  14.     }
  15.     var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
  16.     var title = defaultTitle || '列表'
  17.     saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
  18. }

使用：

  1. import { export_json_to_excel } from "@/plugins/vendor/Export2Excel";
  2. const tableData = [
  3.   {
  4.     type: "小枪",
  5.     child: [{"chinese" : 97, "math": "99" , "english": 95}, {"chinese" : 97, "math": "99" , "english": 95}];
  6.   },
  7.   {
  8.     type: "小刀",
  9.     child: [{"chinese" : 97, "math": "99" , "english": 95}, {"chinese" : 97, "math": "99" , "english": 95}];
  10.   }
  11. ]
  12. exportExcel() {
  13.   const header = [];
  14.   const sheets = [];
  15.   const data = [];
  16.   tableData.forEach(item => {
  17.     sheets.push(item.type);
  18.     const th = [
  19.       "语文",
  20.       "数学",
  21.       "英语"
  22.     ];
  23.     header.push(th);
  24.     const list = item.child;
  25.     const filterVal = ["chinese", "math", "english"];
  26.     const d = this.formatJson(filterVal, list);
  27.     data.push(d);
  28.   });
  30.   export_json_to_excel(header, data, "分析结果", sheets);
  31. },
  33.   formatJson(filterVal, jsonData) {
  34.     return jsonData.map(v => filterVal.map(j => v[j]));
  35.   }

vue-json-excel

使用简单，但是功能比较单一。看了一下源码似乎也不能导出多个 sheet 。

使用：

  1. npm install vue-json-excel

示例代码：

  1. <template>
  2.   <div>
  3.     <el-row>
  4.       <el-col :span="6">
  5.       </el-col>
  6.       <el-col :span="12">
  7.         <h1>{{ msg }}</h1>
  8.         <download-excel v-if="json_data.length >= 0"
  9.                         class="el-button"
  10.                         :data="json_data"
  11.                         :fields="json_fields"
  12.                         worksheet = "My Worksheet"
  13.                         name ="用户信息列表">
  14.           导出Excel
  15.         </download-excel>
  16.       </el-col>
  17.       <el-col :span="6">
  18.       </el-col>
  19.     </el-row>
  20.     <el-table
  21.       :data="json_data"
  22.       border
  23.       style="width: 100%">
  24.       <el-table-column
  25.         prop="type"
  26.         label="序号"
  27.         align="center"
  28.         width="180">
  29.       </el-table-column>
  30.       <el-table-column
  31.         prop="userName"
  32.         label="姓名"
  33.         align="center"
  34.         width="180">
  35.       </el-table-column>
  36.       <el-table-column
  37.         prop="age"
  38.         align="center"
  39.         label="年龄">
  40.       </el-table-column>
  41.       <el-table-column
  42.         prop="phone"
  43.         align="center"
  44.         label="手机号">
  45.       </el-table-column>
  46.       <el-table-column
  47.         prop="createTime"
  48.         align="center"
  49.         label="注册时间">
  50.       </el-table-column>
  51.     </el-table>
  52.   </div>
  53. </template>
  55. <script>
  56. import JsonExcel from 'vue-json-excel'
  58. export default {
  59.   name: 'HelloWorld',
  60.   components:{
  61.     'downloadExcel': JsonExcel
  62.   },
  63.   data () {
  64.     return {
  65.       msg: '使用vue-json-excel插件导出Excel',
  66.       json_fields: {  //导出Excel表格的表头设置
  67.         '序号': 'type',
  68.         '姓名': 'userName',
  69.         '年龄': 'age',
  70.         '手机号': 'phone',
  71.         '注册时间': 'createTime',
  72.       },
  73.       json_data:[
  74.         {"userName":"张三","age":18,"phone":15612345612,"createTime":"2019-10-22"},
  75.         {"userName":"李四","age":17,"phone":15612345613,"createTime":"2019-10-23"},
  76.         {"userName":"王五","age":19,"phone":15612345615,"createTime":"2019-10-25"},
  77.         {"userName":"赵六","age":18,"phone":15612345618,"createTime":"2019-10-15"},
  78.       ]
  79.     }
  80.   },
  81.   created() {
  82.     this.initList();
  83.   },
  84.   methods: {
  85.     initList(){
  86.       for(let i in this.json_data){
  87.         this.json_data[i].type=parseInt(i)+1
  88.       }
  89.     },
  90.   }
  91. }
  92. </script>
  94. <!-- Add "scoped" attribute to limit CSS to this component only -->
  95. <style scoped>
  96. .el-button{
  97.   background-color: lightskyblue;
  98. }
  100. </style>

打开 excel 的时候会有提示，体验没那么好。
image.png

js-xlsx

一款只需要纯 js 即可读取和导出 excel 的工具库，支持 xls 、 xlsx 、ods 等十几种格式。这个暂时还没有尝试过。

参考链接：