vue中elementUI表格数据导出下载为xlsx格式的excel文件

转载bamboozjy原文链接
1.安装依赖：

npm i file-saver --save
npm i xlsx --save

2.在需要的地方引入这两个插件：

import FileSaver from "file-saver";
import XLSX from "xlsx";

3.在点击事件中导出和数据：mytable为表格的id名，sheet.xlsx为导出的文件名
html：

<el-table
    id="mytable"
    ref="multipleTable"
    :data="user.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="user_id" label="序号"></el-table-column>
        <el-table-column prop="user_nickname" label="微信昵称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="user_name" label="姓名"></el-table-column>
        <el-table-column prop="userSex" label="性别"></el-table-column>
</el-table>
 
<button @click="output">导出数据</button>

js：

output() {
      /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(document.querySelector("#mytable"));//mytable为表格的id名
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "sheet.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },