请求返回文件流格式，实现下载文件功能，前端代码

小灰灰 2023-02-27 05:29 9阅读 0赞

let _this = this
          var xhr = new XMLHttpRequest();
          let link = process.env.VUE_APP_BASE_API+'/gbgl/downloadDoclist'
          xhr.open('POST', link, true);    // 也可用POST方式
          xhr.responseType = "blob";
          xhr.onload = function () {
            if (this.status === 200) {
              var blob = this.response;
              let fr = new FileReader()
              fr.readAsText(blob)
              fr.onload = (e)=>{
                let result = fr.result
                try{
                  let msg = JSON.parse(result)
                  _this.$message.error(msg.message)
                } catch(e){
                  if (navigator.msSaveBlob == null) {
                    var a = document.createElement('a');
                    var headerName = xhr.getResponseHeader("Content-disposition");
                    // console.log(headerName)
                    var fileName = decodeURIComponent(headerName)
                    if(fileName.indexOf('"')!=-1){
                      fileName = fileName ? fileName.split('filename="')[1] : '下载文件'
                      fileName = fileName ? fileName.split('"')[0]:'下载文件';
                    } else {
                      fileName = fileName ? fileName.split('filename=')[1] : '下载文件'
                    }
                    a.download = fileName;
                    a.href = URL.createObjectURL(blob);
                    document.body.appendChild(a)
                    a.click();
                    URL.revokeObjectURL(a.href);
                    a.remove();
                    _this.$message({type:'success',message:'导出成功！'})
                  } else {
                      navigator.msSaveBlob(blob, fileName);
                  }
                }
              }
            } else {
              _this.$message({type:'error',message:this.statusText})
            }
          };
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
          xhr.setRequestHeader("token", getToken());
          let query = this.$copy(this.dataForm)
          query.degrees = query.degrees.filter(e=>e.degreeIds||e.educationBackgroundIds)
          query.cadres = this.cadres
          xhr.send(this.$http.adornData(query))

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关请求返回文件流格式，实现下载文件功能，前端代码

let _this = this var xhr = new XMLHttpRequest(); let link = proc

小灰灰/ 2023年02月27日 05:29/ 0 赞/ 10 阅读

相关前端下载文件(blob流文件下载及修改下载文件名称)

项目中经常遇到文件下载需求，有时候后台返回的是一个blob流文件（就是看起来像是乱码的数据），这时就需要前端对文件进行处理，或展示，或下载。故这里简单实现一下blob流文件下载

一时失言乱红尘/ 2022年12月27日 14:03/ 0 赞/ 331 阅读

相关文件下载（导出）文件（文件流或者普通格式）

1、文件流格式： exportPreSumData(this.params) .then(res => {

一时失言乱红尘/ 2022年11月29日 13:11/ 0 赞/ 162 阅读

相关前端---文件下载通用工具类、后端将pdf文件以流形式返回，前端实现pdf文件预览

前端文件下载通用工具类 //下载文件处理工具： responase：接口返回的整体数据 fileName(非必传)：自定义的文件名，例：xx.xlsx，如

小鱼儿/ 2022年11月29日 12:22/ 0 赞/ 195 阅读

相关 react前端下载后端返回文件流(文件流下载excel、csv)

以前用vue框架的时候，写过不少下载上传的东西，当然包括后端返回文件流供前端下载，现在用react，牵扯到这个功能，又提起来说，有两种下载类型，一种是Excel，一种是Csv。

水深无声/ 2022年11月06日 06:59/ 0 赞/ 595 阅读

相关 python 代码实现文件下载功能

python 代码实现文件下载功能 !/usr/bin/env python3 import requests; from contex

痛定思痛。/ 2022年05月24日 08:47/ 0 赞/ 235 阅读

相关 SpringMVC实现文件下载功能（文件导出功能）

1.页面代码 <a class="layui-btn" href="${pageContext.request.contextPath}/bAndWListManag

梦里梦外;/ 2022年05月09日 03:48/ 0 赞/ 332 阅读

相关接口返回二进制文件流,前端通过blob对象实现下载

1、[https://www.jianshu.com/p/d175e6058b1b][https_www.jianshu.com_p_d175e6058b1b] 2、[ht

喜欢ヅ旅行/ 2022年02月02日 09:27/ 0 赞/ 287 阅读

相关后台返回文件流，监听文件下载结束

1、后台正常返回流即可 @RequestMapping(value = "/download/fileword", method = RequestMethod.GE

刺骨的言语ヽ痛彻心扉/ 2021年12月23日 13:51/ 0 赞/ 313 阅读

相关 Java VUE 使用文件流实现下载功能

1、后端：controller控制器 / 导出 --->资产信息 @return @throws IO

喜欢ヅ旅行/ 2021年09月30日 04:50/ 0 赞/ 560 阅读