vue前端导出表格为excel文件

需要安装依赖

npm install xlsx xlsx-style file-saver
``````javascript
<template>
	<div>
        <el-button size="mini" type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
        <el-table :data="tableData" border style="width: 100%" class="exporttable">
          <el-table-column label="序号" width="55" type="index" />
          <el-table-column label="序号" width="55" type="index" />
          <el-table-column prop="date" label="日期" width="180" />
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="address" label="地址" />
        </el-table>
	</div>
</template>

<script>
import FileSaver from "file-saver";
var XLSX = require("xlsx");
export default {
  props: {},
  name: "export",
  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 弄",
        },
      ],
    };
  },
  filters: {},
  created() {},
  mounted() {},
  watch: {
  },
  methods: {
    handleExport() {
      var xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(
        document.querySelector(".exporttable"),
        xlsxParam
      );
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "车辆信息.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
  },
};
</script>

其他参考文档