https://www.npmjs.com/package/js-export-excel

第一步，先安装该组件：

npm install js-export-excel

or

yarn add js-export-excel

  

 

  
1
  
2
  
3
  
4
  
5
 

第二步，在需要地方引用

const ExportJsonExcel = require("js-export-excel");

or

import ExportJsonExcel from "js-export-excel";

  

 

  
1
  
2
  
3
  
4
  
5
 

开始使用

<template>
  <div class="about">
    <button @click="exportExcel">点击导出</button>
  </div>
</template>
<script>
  import ExportJsonExcel from "js-export-excel";
export default {
  data(){
    return{
      selections:[
        {'index':'0',"num": "001", "name": "小明"},
        {'index':'1',"num": "002", "name": "小红"},
        {'index':'2',"num": "003", "name": "小兰"}
      ]
    }
  },
  methods: {
    //定义导出Excel表格事件
    exportExcel: function () {
      var data = this.selections;//选中的数据
      let dataTable = [];
      if (data && data.length > 0) {
        for (let i in data) {
          if (data[i]) {
            let obj = {
              索引: data[i].index,
              学号: data[i].num,
              姓名: data[i].name
            };
            dataTable.push(obj);
          }
        }
        this.exportToExcel(dataTable);
      }
    },
    exportToExcel (dataTable) {
      var option = {};
      option.fileName = "学生信息";
      option.datas = [
        {
          sheetData: dataTable,
          sheetName: "sheet",
          sheetFilter: [
            "索引",  // 要和上面定义的对应
            "学号",
            "姓名"
          ],
          sheetHeader: [
            "索引",
            "学号",
            "姓名"
          ]
        }
      ];
      var toExcel = new ExportJsonExcel(option);
      toExcel.saveExcel();
    }
  }
}
</script>
<style scoped>
</style>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
 

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/109184486