vue+elementui 导出table为xlsx表格

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

第一步：安装所需要的的依赖模块

cnpm i file-saver --save  
cnpm i xlsx --save

第二步：在需要导出的页面引入以下两个模块

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

第三步：给table添加一个Id

<el-table >
  <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>

<button @click="exportExcel">导出数据</button>

第四部分：js

  exportExcel() {
      var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换(添加此行代码表格中的百分比就不会再导出的时候被转换成小数点)
      let wb = XLSX.utils.table_to_book(
        document.querySelector("#table"),
        xlsxParam
      );
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      // 获取当前的时间戳，用来当文件名
      let time = new Date().getTime();
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `${time}.xlsx`
        ); //${time}是自己导出文件时的命名，随意
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

以上是 vue+elementui 导出table为xlsx表格 的全部内容， 来源链接： utcz.com/z/374750.html

回到顶部