vue项目前端下载数据为xlxs格式写这个主要是给自己做一个记录，以后工作遇到了可以直接用得上。如果刚好你也遇到了能用得

写这个主要是给自己做一个记录，以后工作遇到了可以直接用得上。如果刚好你也遇到了能用得上那也不错呀

前景：一般情况下项目下载数据到电脑，基本上都是后端处理，后端只需要给一个get请求的接口，前端只需要调用。如果需要给后端传参。只需要拼接到url上面即可。但是遇到需要传很多参数或者参数是一个对象或者数组的时候。这种传参肯定就不行了。刚好今天在做项目的时候遇到了。具体的需求：根据条件查询到数据之后，勾选要下载的数据下载。然后后端就需要拿到我们勾选的id集合。这样上面的方法就不实用了。然后自己想就自己前端直接下载吧

然后就有了下面这种方法，其实不是自己写的，百度编程，大家都懂的

首先这个是我在vue项目中使用，所以下面的方法只在vue项目中使用。

首先第一步需要下载一个插件
```
   npm install -S file-saver xlsx
```
如果项目中经常用得到这个的话，其实可以封装一个全局函数。这里我只在一个单独页面使用。先引用
```
   import XLSX from 'xlsx'
```

然后这就是具体函数

exportList () { // 这个方法就是页面点击触发
  const list = this.listss.map(item => {
    return {
      '风险ID':item.riskIdName,
      '风险值': item.value,
      '来源': item.source,
      '状态': item.statusName,
      '失效时间': item.expiredTimeName,
      '备注': item.remark,
    }
  })
  // 下载的xlsx文件头部是根据上面数据的键名来展示的，所以需要用风险ID来展示
  let wopts = {
     bookType: 'xlsx',
     bookSST: false,
     type: 'binary'
   }
   var workBook = {
     SheetNames: ['Sheet1'],
     Sheets: {},
     Props: {}
   }
   //1、XLSX.utils.json_to_sheet(data) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表，默认的列顺序由使用Object.keys的字段的第一次出现确定
   //2、将数据放入对象workBook的Sheets中等待输出
   workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(list) // list数据就是你需要下载的数据

   //3、XLSX.write() 开始编写Excel表格
   //4、changeData() 将数据处理成需要输出的格式
   this.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], { type: 'application/octet-stream' }))
},
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 buf1 = new Array(s.length);
    for (var i1 = 0; i1 != s.length; ++i1) buf1[i1] = s.charCodeAt(i1) & 0xFF;
    return buf1;
  }
},
saveAs(obj, fileName) {//当然可以自定义简单的下载文件实现方式
  var tmpa = document.createElement("a");
  tmpa.download = fileName ? fileName + '.xlsx' : '名单管理' + '.xlsx';
  tmpa.href = URL.createObjectURL(obj); //绑定a标签
  tmpa.click(); //模拟点击实现下载

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

}