el-table导出为excel表格----vue

1、安装依赖

npm install xlsx@^0.16.0 --registry=https://registry.npmmirror.com   
npm install file-saver --registry=https://registry.npmmirror.com

2、在main.js文件中全局配置

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import FileSaver from 'file-saver'  
import XLSX from 'xlsx'

Vue.config.productionTip = false

Vue.prototype.$FileSaver = FileSaver; 
Vue.prototype.$XLSX = XLSX;

Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app')

3、template代码

<template>
  <div>
    <el-button type="primary" @click="outExcel">导出excel</el-button>
    <el-table :data="tableData" border style="width: 100%" id="table_excel">
      <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>
</template>

4、script代码

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    outExcel() {
      this.$alert("是否导出excel", "导出", {
        confirmButtonText: "确定",
        callback: (action) => {
          var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
          let tables = document.getElementById("table_excel");
          let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
          const table_write = this.$XLSX.write(table_book, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            this.$FileSaver.saveAs(
              new Blob([table_write], { type: "application/octet-stream" }),
              `excel表格.xlsx` //这里是文件名
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, table_write);
          }
          return table_write;
        },
      });
    },
  },
};

5、vue全部代码

<template>
  <div>
    <el-button type="primary" @click="outExcel">导出excel</el-button>
    <el-table :data="tableData" border style="width: 100%" id="table_excel">
      <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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    outExcel() {
      this.$alert("是否导出excel", "导出", {
        confirmButtonText: "确定",
        callback: (action) => {
          var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
          let tables = document.getElementById("table_excel");
          let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
          const table_write = this.$XLSX.write(table_book, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            this.$FileSaver.saveAs(
              new Blob([table_write], { type: "application/octet-stream" }),
              `excel表格.xlsx` //这里是文件名
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, table_write);
          }
          return table_write;
        },
      });
    },
  },
};
</script>

<style>
</style>