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

2019年10月19日20:13:20 3 阅读(4,519)

选择表格行实现导出为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
      回复 2020年4月22日 上午8:17   板凳

      厉害啊

      • 堂堂7272 堂堂7272 0
        回复 2020年4月10日 上午10:21   沙发

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

          • 舍得 舍得
            回复 2020年4月10日 下午2:12

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