Vue实现element table表格导出为excel表格

实现element表格导出为excel表格

vue使用elementUI，做出来的表格需要导出为excel表格。

1、安装相关依赖

cnpm install --save xlsx file-saver

2、组件里头引入(项目多处运用,可放到main.js当中)

import FileSaver from ‘file-saver’
import XLSX from ‘xlsx’

3、在页面中按钮上加方法

<button @click="exportExcel()">导出</button>

4、组件methods里写一个方法

1. 无提醒的

 exportExcel () {
         /* out-table关联导出的dom节点  */
         var wb = XLSX.utils.table_to_book(document.querySelector('#out-table')) //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' }), '药品信息.xlsx') //导出文件的名字
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
 },

2. 有提醒的

this.$confirm("是否确认导出当前所有借阅统计数据?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then((response) => {
            var wb = XLSX.utils.table_to_book(
              document.querySelector(".dataListFirst")
            );
            var wbout = XLSX.write(wb, {
              bookType: "xlsx",
              bookSST: true,
              type: "array",
            });
            try {
              FileSaver.saveAs(
                new Blob([wbout], { type: "application/octet-stream" }),
                "借阅统计.xlsx"
              );
            } catch (e) {
              if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
          });

5、导出的结果

PC页面:

点击导出之后得到的表格

6、备注

1. 这样的做法,导出当前页表格的内容不用走后台接口;
2. 当前页面的表格数据显示为多少条就导出多少条(视当前表格分页显示数据条数而定)
3. 使用的如果有诟病希望大家可以评论里留言

原文链接