专栏首页前端之攻略Element 表格导出为Excel表格

Element 表格导出为Excel表格

一、安装xlsx和filesaver

npm install --save xlsx file-saver

二、在表格组件中引入安装的2个文件

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

三、HTML结构

    <el-table :data="tableData3" style="width: 500px" height="250" id="table">
      <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="province" label="省份" width="120"></el-table-column>
      <el-table-column prop="city" label="市区" width="120"></el-table-column>
      <el-table-column prop="address" label="地址" width="300"></el-table-column>
      <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
    </el-table>
    <el-button type="success" style="margin-top:20px;" @click="exportExcel">导出</el-button>

 四、导出的方法

  methods: {
      exportExcel() {
          // out-table 关联导出的DOM节点
          var fixed = document.querySelector(".el-table__fixed");
          var excelTitle = "标题";
          var wb = XLSX.utils.table_to_book(document.querySelector("#table"));
          /* 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" }),
                  excelTitle + ".xlsx"
              );
          } catch (e) {
              if (typeof console !== "undefined") console.log(e, wbout);
          }
          return wbout;
      }
  }

在页面点击导出按钮时可以正常导出,但是如果左边有固定的列,相同的数据会导出2遍,可以做如下修改:

  methods: {
    exportExcel() {
      // table 关联导出的DOM节点
      var fixed = document.querySelector(".el-table__fixed");
      var wb;
      var excelTitle = "标题";
      if (fixed) {
        wb = XLSX.utils.table_to_book(
          document.querySelector("#table").removeChild(fixed)
        );
        document.querySelector("#table").appendChild(fixed);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#table"));
      }

      /* 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" }),
          excelTitle + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }
  }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Element table设置固定列,没有滚动条时底部会显示一条线的解决方法

    在小屏幕上含有滚动条,显示是正常的,但是如果是大屏幕没有滚动条就在底部约17像素的地方有一条线,非常不美观,

    tianyawhl
  • element 嵌套数据合并单元格两种处理方法

    通过table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面是{row, column, rowIndex, columnInde...

    tianyawhl
  • Element 表格排序

    见官网的介绍,在列中设置sortable属性即可实现以该列为基准的排序,可以通过Table的default-sort属性设置默认的排序列和排序顺序。可以使用so...

    tianyawhl
  • 学习Vim合并行的方法和技巧

    刚接触 Vim 会觉得它的学习曲线非常陡峭,要记住很多命令。所以这个系列的分享,不会 教你怎么配置它,而是教你怎么快速的使用它。

    砸漏
  • vue2.0 + element-ui 实战项目-渲染表格(四)

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 github地址:https://gith...

    王小婷
  • 【Vue.js】Vue.js组件库Element中的表格、标签和进度条

    可将表格内容 highlight 显示,方便区分「成功、信息、警告、危险」等内容。

    魏晓蕾
  • IP摄像头RTSP协议视频平台EasyNVR录像列表没有按照开始时间倒序排序的问题修复

    TSINGSEE青犀视频全线产品都有对应的协议,比如对应RTSP协议的视频平台EasyNVR、对应RTMP协议的视频直播点播平台EasyDSS等,并且都可录像,...

    EasyNVR
  • 新手福利,通过一个简单示例快速上手Spring Boot+Vue前后端分离

    Vue + Element UI 并不是真正的前后端分离,它只有前端服务,并没有后端服务提供数据接口,很多小伙伴在后台留言希望楠哥能写一篇完整的 Spring ...

    南风
  • Element-ui中Table表中el-table-column列数据的布尔值回填

        前端使用vue+element-ui,我们经常会使用table来展示从后台请求回来的数据,但是,如果被请求回来数据是Boolean类型的时候,在tabl...

    跟着阿笨一起玩NET
  • 关于 JS 模块化的最佳实践总结

    模块化开发是 JS 项目开发中的必备技能,它如同面向对象、设计模式一样,可以兼顾提升软件项目的可维护性和开发效率。

    程序员LIYI

扫码关注云+社区

领取腾讯云代金券