开发者社区> 猫先生c> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

二进制流下载文件

简介: 二进制流下载文件
+关注继续查看

后端返回二进制流,前端进行下载时,一般需要转成blob(Binary large Object),然后再进行下载。


blob构造函数语法:

var blob = new Blob(blobParts, options);
  • blobParts:它是一个由 ArrayBuffer,ArrayBufferView,Blob,DOMString 等对象构成的数组,或者其他类似对象的混合体。DOMStrings 会被编码为 UTF-8
  • options:一个可选的对象,包含以下两个属性:

type —— 默认值为 “”,它代表了将会被放入到 blob 中的数组内容的 MIME 类型。

endings —— 默认值为 “transparent”,用于指定包含行结束符 \n 的字符串如何被写入。 它是以下两个值中的一个: “native”,代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 “transparent”,代表会保持 blob中保存的结束符不变。(该选项博主理解不深,有了解的小伙伴可评论区留言)

设置MIME类型

const mimeMap = {
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  zip: 'application/zip'
}

设置环境BASE_API

const baseUrl = process.env.VUE_APP_BASE_API

请求下载

  • 设置responseType:blob;
  • 如需要设置token,在请求头加上{ ‘Authorization’: 'Bearer ’ + getToken() };
  • 从response的headers中获取filename, 后端需在response.setHeader(“Content-disposition”, “attachment; filename=xxxx.docx”) 设置的件名。
export function downLoadZip(str, filename, data, type) {
  var url = baseUrl + str
  request(url, filename, data, 'zip')
}
export function downloadXlsx(str, filename, data) {
  var url = baseUrl + str
  request(url, filename, data, 'xlsx')
}
function request(url, filename, data, type) {
  axios({
    method: 'post',
    url: url,
    responseType: 'blob',
    data: data,
    headers: { 'Authorization': 'Bearer ' + getToken() }
  }).then(res => {
    resolveBlob(res, mimeMap[type])
  })
}
/**
 - 解析blob响应内容并下载
 - @param {*} res blob响应内容
 - @param {String} mimeType MIME类型
 */
export function resolveBlob(res, mimeType) {
  const aLink = document.createElement('a')
  var blob = new Blob([res.data], { type: mimeType })
  var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
  var contentDisposition = decodeURI(res.headers['content-disposition'])
  var result = patt.exec(contentDisposition)
  var fileName = result[1]
  fileName = fileName.replace(/\"/g, '')
  aLink.href = URL.createObjectURL(blob)
  aLink.setAttribute('download', fileName) // 设置下载文件名称
  document.body.appendChild(aLink)
  aLink.click()
  document.body.appendChild(aLink)
}

可能出现的问题

  • 不设置responseType:blob,文件会下载,但是打不开;文件不能下载,报code:500
    image
  • MIME类型设置错误,打开xlsx文件出现[Object Object]或者undefined
    image
  • res.data打印值

image

  • res.header打印值
    image
  • new RegExp().exec()

exec()接受一个参数,即要应用模式的字符串,然后返回包含第一个匹配项信息的数组;或者在没有匹配项的情况下返回null。

返回的数组是Array实例,但包含两个额外的属性: index 和 input

index 表示匹配项在字符串中的位置;

index 表示匹配项在字符串中的位置。


补充:


前端axios设置了responseType:blob时,接收到数据就是blob,但是当文件导出失败时,返回的类型是json(为什么是json,后端异常处理一般都是response.setContentType(“application/json”);throw error;),此时是无法正常解析的,此时要通过json转换的形式进行解析。

if(data.type=="application/json"){
        const reader=new fileReader();
        reader.onload=function(){
             const {msg}= JSON.parse(reader.result);
             //处理错误
        this.$message.error(msg)
        };
        reader.readAsText(data);
    }else{
    //按上面正常的来
    }

另一种写法

const reader = new fileReader();
reader.onload=function(){
try(){
//如果JSON.parse(reader.result)不报错,则返回的是json,否则返回的是二进制流,进入catch,下载文件
   if(JSON.parse(reader.result)){
       const {msg}= JSON.parse(reader.result);
       //处理错误
       this.$message.error(msg)
   }
}catch(err){
//下载文件
}

};

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
下载文件
下载文件
0 0
如何正确地把服务器端返回的文件二进制流写入到本地保存成文件
我使用 Node.js 的 request 工具库,请求服务器端的视频文件,保存到本地之后,发现了问题。 我把 url 输入到浏览器里,手动下载视频文件后,文件大小为 70 多 KB:
0 0
使用 C# 下载文件的十八般武艺
文件下载是一个软件开发中的常见需求。本文从最简单的下载方式开始步步递进,讲述了文件下载过程中的常见问题并给出了解决方案。并展示了如何使用多线程提升 HTTP 的下载速度以及调用 aria2 实现非 HTTP 协议的文件下载。
0 0
HttpWebRequest(跨域下载文件——网络流转换为内存流下载)
1.Stream 转换为 MemoryStream(Stream不支持查找) MemoryStream StreamToMemoryStream(Stream instream) { MemoryStream outstream = new Mem...
592 0
C# 文件流压缩解压
/// <summary> /// 文件流压缩解压 /// </summary> public class ZipHelper { public static int BEST_COMPRESSION = 9; public static int BEST_SPEED = 1; publi
798 0
从FTP服务器返回来的TelnetInputStream流中读取文件的文件名,文件大小,文件日期
这两天在做毕业设计,使用的是sun.net.ftp.FtpClient,其中有个难题就是怎么获取服务器中的文件列表并显示出来,终于弄出来了,现在写出来记录一下 step1:获取服务器文件列表的信息,返回一个TelnetInputStream TelnetInputStream list = ftpClient.
1046 0
简单二进制上传下载文件
前端代码: @model Business.Models.Model @{ ViewBag.Title = "上传文件"; } var Input = {}; Input.
394 0
利用Stream下载文件
Function dl(f,n)     On error resume Next     Set s=CreateObject("Adodb.Stream")     s.Mode=3     s.
451 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载