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

2019年10月19日20:13:20 3 阅读(3,343)
本文最后更新于2019年10月19日,已超过一年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

选择表格行实现导出为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文件。

 

完。

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:3   其中:访客  2   博主  1

    • 企鹅博客 企鹅博客 0

      厉害啊

      • 堂堂7272 堂堂7272 0

        博主,我返回二进制流文件了,怎么下载,求指导

          • 舍得 舍得

            @堂堂7272 文章中请求接口的代码就是点击导出的请求,请求成功直接就在浏览器下载了, 具体要看你们的后台怎么和你们约定的接口参数