Hao

Vue+ElementUI导出二进制流文件为excel

JavaScript 2019-10-19 5022 3
20:13:20

选择表格行实现导出为excel表格的功能，在现代业务需求中很常见，博主最近就做了这样的一个需求，因此写下这篇文章整理备份。

Vue+ElementUI导出二进制流文件为excel

表格添加多选框

  1. <el-table-column
  2.     type="selection"
  3.     width="55"
  4.     align="center">
  5. </el-table-column>

type设置为selection显示多选框

点击多选框触发事件@selection-change="handleSelectionChange"

  1. handleSelectionChange(val) {
  2.   this.multipleSelection = val;
  3. },

给multipleSelection变量赋值为当前选择的数据，拿到将要导出的数据并请求接口

请求接口代码

  1. var url =  '';      // 请求的url
  2. var xhr = new XMLHttpRequest();
  3. var obj = JSON.stringify(this.multipleSelection); //转换为字符串类型
  4. var token = sessionStorage.getItem('token')
  5. xhr.open("POST", url, true)
  6. xhr.responseType = "blob"; //blob对象
  7. xhr.setRequestHeader("content-type", "application/json"); //设置请求头
  8. xhr.setRequestHeader("token", token);           // 自定义请求头
  9. xhr.onload = function(){
  10.     if(this.status == 200){
  11.         var blob = this.response;
  12.         var fileName = '信息表.xlsx';
  13.         if(window.navigator.msSaveOrOpenBlob){          // IE浏览器下
  14.             navigator.msSaveBlob(blob, fileName);
  15.         } else {
  16.             var  link = document.createElement("a");
  17.             link.href = window.URL.createObjectURL(blob);
  18.             link.download = fileName;
  19.             link.click();
  20.             window.URL.revokeObjectURL(link.href);
  21.         }
  22.     }
  23. };
  24. xhr.send(JSON.stringify(obj))

请求成功

Vue+ElementUI导出二进制流文件为excel

接口返回以上二进制流文件，下载保存为excel文件。

 

完。

本文由 Hao创作，转载请注明

最后编辑时间：2019-10-19 20:13:20

发表评论