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

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;
    },

参考:传送门

没有更多推荐了,返回首页