Vue实现表格导出Excel

1、通过npm获取安装依赖

npm install --save xlsx file-saver

2、打开package.json配置文件，若有file-saver以及xlsx则代表安装成功

3、在 main.js中引入file-saver以及xlsx组件

// file-saver组件
import FileSaver from "file-saver"
// xlsx组件
import * as XLSX from "xlsx"

// 全局方法挂载
Vue.prototype.FileSaver = FileSaver
Vue.prototype.XLSX = XLSX

4、为el-table表格添加id属性标识，如exportTab，对应exportExcel方法中的 document.querySelector(‘#exportTab’)

<!--添加导出按钮-->
<el-button type="primary" @click="exportExcel">导出Excel</el-button>
<!--为el-table表格添加id属性标识-->
<el-table :data="tableData" id="exportTab" style="width: 100%" height="400">
    <!--fixed：是否固定列-->
    <!--sortable：对应列是否可以排序-->
    <el-table-column fixed="left" sortable prop="date" label="日期" width="150"/>
    <el-table-column prop="name" label="姓名" width="120"/>
    <el-table-column prop="province" label="省份" width="120"/>
    <el-table-column prop="city" label="市区" width="120"/>
    <el-table-column prop="address" label="地址" width="300"/>
    <el-table-column prop="zip" label="邮编" width="120"/>
</el-table>

5、在methods中设置实现导出Excel表格的方法

注：如果导出的数据出现两份的情况，因为使用了el-table的fixed属性来让某一列固定，但Element UI的实现方式是：创建了两个table标签，通过一个隐藏一个显示来实现交互效果。当导出整个el-table 就会将两个table都导出，导致数据重复。因此先判断要导出的节点中是否含有fixed，如果有，转换excel时先将该dom移除，然后append回去

methods: {
      exportExcel() {
        // 从表生成工作簿对象
        var xlsxParam = {raw: true} // 导出的内容只做解析，不进行格式转换

        // 如果fixed="right"，则将".el-table__fixed"更换为".el-table__fixed-right"
        let fix = document.querySelector(".el-table__fixed");// fixed和fixed="left"都是用这个
        let wb;
        if (fix) {
          //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
          wb = this.XLSX.utils.table_to_book(
            document.querySelector("#exportTab").removeChild(fix),
            xlsxParam
          );
          document.querySelector("#exportTab").appendChild(fix);
        } else {
          wb = this.XLSX.utils.table_to_book(
            document.querySelector("#exportTab"),
            xlsxParam
          );
        }

        // 获取二进制字符串作为输出
        var wbout = this.XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        try {
          this.FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '表格导出测试.xlsx')
        } catch (e) {
          if (typeof console !== 'undefined') {
            console.log(e, wbout)
          }
        }
        return wbout
      }
}

6、完整Vue页面代码

<template>
  <el-col :span="12">
    <el-card>
      <!--添加导出按钮-->
      <el-button type="primary" @click="exportExcel">导出Excel</el-button>
      <!--为el-table表格添加id属性标识-->
      <el-table :data="tableData" id="exportTab" style="width: 100%" height="400">
        <!--fixed：是否固定列-->
        <!--sortable：对应列是否可以排序-->
        <el-table-column fixed="left" sortable prop="date" label="日期" width="150"/>
        <el-table-column prop="name" label="姓名" width="120"/>
        <el-table-column prop="province" label="省份" width="120"/>
        <el-table-column prop="city" label="市区" width="120"/>
        <el-table-column prop="address" label="地址" width="300"/>
        <el-table-column prop="zip" label="邮编" width="120"/>
      </el-table>
    </el-card>
  </el-col>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2023-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2023-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2023-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2023-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2023-05-05',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2023-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2023-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2023-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2023-05-09',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2023-05-10',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2023-05-11',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2023-05-12',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      };
    },

    methods: {
      exportExcel() {
        // 从表生成工作簿对象
        var xlsxParam = {raw: true} // 导出的内容只做解析，不进行格式转换

        // 如果fixed="right"，则将".el-table__fixed"更换为".el-table__fixed-right"
        let fix = document.querySelector(".el-table__fixed");// fixed和fixed="left"都是用这个
        let wb;
        if (fix) {
          //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
          wb = this.XLSX.utils.table_to_book(
            document.querySelector("#exportTab").removeChild(fix),
            xlsxParam
          );
          document.querySelector("#exportTab").appendChild(fix);
        } else {
          wb = this.XLSX.utils.table_to_book(
            document.querySelector("#exportTab"),
            xlsxParam
          );
        }

        // 获取二进制字符串作为输出
        var wbout = this.XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        try {
          this.FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '表格导出测试.xlsx')
        } catch (e) {
          if (typeof console !== 'undefined') {
            console.log(e, wbout)
          }
        }
        return wbout
      }
    }
  };
</script>

7、前端页面效果

8、点击导出Excel按钮，以下为Excel效果