前端实现导出Excel，使用file-saver和 xlsx

前端实现导出Excel

npm install -S file-saver xlsx
 在需要的页面引入  import XLSX from 'xlsx';  
 注意：如果出现XLSX 是underfind，可能是版本问题，可使用这两个版本： "file-saver": "^2.0.2",  "xlsx": "^0.16.0",
  s2ab(s) {
      var cuf;
      var i;
      if (typeof ArrayBuffer !== "undefined") {
      cuf = new ArrayBuffer(s.length);
      var view = new Uint8Array(cuf);
      for (i = 0; i !== s.length; i++) {
        view[i] = s.charCodeAt(i) & 0xff;
      }
      return cuf;
      } else {
      cuf = new Array(s.length);
      for (i = 0; i !== s.length; ++i) {
        cuf[i] = s.charCodeAt(i) & oxFF;
      }
      return cuf;
      }
    },

    changeData (s) {
      //如果存在ArrayBuffer对象(es6) 最好采用该对象
      if (typeof ArrayBuffer !== 'undefined') {
        //1、创建一个字节长度为s.length的内存区域
        var buf = new ArrayBuffer(s.length);
        //2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
        var view = new Uint8Array(buf);
        //3、返回指定位置的字符的Unicode编码
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      } else {
        var buf2 = new Array(s.length);
        for (var k = 0; k != s.length; ++k) buf2[k] = s.charCodeAt(k) & 0xFF;
        return buf2;
      }
    },

    saveAs (obj, fileName) {//当然可以自定义简单的下载文件实现方式
      var tmpa = document.createElement("a");
      tmpa.download = fileName ? fileName + '.xlsx' : new Date().getTime() + '.xlsx';
      tmpa.href = URL.createObjectURL(obj); //绑定a标签
      tmpa.click(); //模拟点击实现下载

      setTimeout(function () { //延时释放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
      }, 100);

    },
    
    //按钮调用的方法
    exportData () {
      var wopts = {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary'
      };
      var workBook = {
        SheetNames: ['Sheet1'],
        Sheets: {},
        Props: {}
      };
      //设置excel表格的表头
      let sheet1data = []
      this.statisticsDatas.forEach((item)=>{
        sheet1data.push({ 公司名称: item["enterpriseName"],
            企业类型: item["dictLabel"],
            房间号: item["roomNumber"],
            开始时间: item["startTime"],
            到期时间: item["endTime"],
            租赁状态: item["leaseState"] == 0 ? "在期" : "到期",
        });
      })
      //1、XLSX.utils.json_to_sheet(data) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表，默认的列顺序由使用Object.keys的字段的第一次出现确定
      //2、将数据放入对象workBook的Sheets中等待输出
      workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(sheet1data)

      //3、XLSX.write() 开始编写Excel表格
      //4、changeData() 将数据处理成需要输出的格式
      this.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], { type: 'application/octet-stream' }),'医生在线情况')
    },

    excelDefault(){
      this.exportData();
    },

低配版

3.使用qf-export库导出表格excel
.1、安装 

npm install qf-export-excel
2、引入

const qee = require("qf-export-excel")
或者
import qee from "qf-export-excel"
3、绑定事件

<el-button type="primary"

                   @click="downlaodHandler">导出Excel表</el-button>

4、参数

这个库是个函数方法接收3个参数,分别是titleList dataSource fileName

titleList:这是标题的数据来源,是一个数组,每个值是个对象,对象中有两个属性,一个是title对应的是表格的表头文字,key是对应导出数据的key

 downlaodHandler () {
      var titleList = [
        { title: 'id', key: "id" },
        { title: '地址', key: "address" },
        { title: '日期', key: 'date' },
        { title: '金额', key: 'money' },
        { title: '状态', key: 'state' },
      ]
      var dataSource = this.tableData
      var fileName = "表格"
      qee(titleList, dataSource, fileName)
    },
fileName就是一个文件名 不传默认为'数据'文件名 

this.tableData= [
{address: "广东省东莞市长安镇"
date: "2019-11-1"
id: 1
money: 123
name: "张三"
state: "成功"},
]