element-ui表格导出及导出所有分页数据

第一步：安装依赖

npm install  xlsx file-saver  --save

第二步：在组件中导入

import * as FileSaver from 'file-saver'

import * as XLSX from 'xlsx'

第三步：1、给对应表格添加id   2、methods中写入方法

一.没有分页的表格导出

outputFile() {
        var ws1 = XLSX.utils.table_to_book(document.querySelector('#Table1'));//对应要导出的表格id

        /* get binary string as output */
        var wbOut = XLSX.write(ws1, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
                  new Blob([wbOut], { type: "application/octet-stream" }),
                  "demo.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbOut);
        }
        return wbOut;
      }

二.有分页的表格导出

outputFile() {
        //因为此处有分页，每页展示10条数据，在方法调用的开始，展示所有数据，导出之后再把条数更改过来
        this.page.pageSize = this.tableData.length;
        this.$nextTick(function () {
            var ws1 = XLSX.utils.table_to_book(document.querySelector('#Table1'));//对应要导出的表格id

            /* get binary string as output */
            var wbOut = XLSX.write(ws1, {
              bookType: "xlsx",
              bookSST: true,
              type: "array"
            });
            try {
              FileSaver.saveAs(
                  new Blob([wbOut], { type: "application/octet-stream"     }),
                  "demo.xlsx"
              );
            } catch (e) {
              if (typeof console !== "undefined") console.log(e, wbOut);
            }
　　　　　　　　this.page.pageSize = 10; //表格还原
            return wbOut;
        });
    }                        

 

第四步：给按钮绑定方法outputFile