zoukankan      html  css  js  c++  java
  • vue+elementui 导出table为xlsx表格

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

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

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

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

    第三步:给table添加一个Id

    <el-table id="table" :data="tableData" style=" 100%">
      <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,angular,react框架对比1
    前端开发 Angular
    前端开发 Vue Vue.js和Node.js的关系
    net技术
    net技术方案
    软件工程项目费用计算
    前端开发 Vue -4promise解读2
    前端开发 Vue -4promise解读1
    mybatis与hibernate区别
    struts2和springmvc的区别
  • 原文地址:https://www.cnblogs.com/tlfe/p/12711448.html
Copyright © 2011-2022 走看看