开发公司返回流文件前端处理方法(全)

开发公司接口返回二进制前端处理方法

中,开发公司为保证数据安全性,开发公司文件数据通常使用接口开发公司调用方式获取,开发公司后端返回二进制文件流开发公司后前端该如何处理。

流数据转链接
获取到的流文件数据(注意:接口调用时需设置responseType:blob)使用Blob构造函数（将二进制数据存储为一个单一个体的集合）进行转换，它接受两个参数。第一个参数是数组，成员是字符串或二进制对象，表示新生成的Blob实例对象的内容；第二个参数是可选的，是一个配置对象。然后通过URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL.最后返回一个以blob://xxx的浏览器临时路径地址

	//(例)将pdf流文件数据转为临时链接地址	let blob = new Blob([res.data],{type:'application/pdf'}	const url = URL.createObjectURL(blob)
1
2
3

对于不同类型文件转换通过改变type的值实现

文件类型分类

常见文件场景有图片、视频、音频、word、excel、pdf这些类别

非流文件处理
正常情况下会返回流文件前端进行转换,在错误情况下返回报错(json)信息时,这时我们不需要下载文件而是给出错误信息.
接口返回的报错信息是json格式,由于请求设置了responseType:‘blob’,所以会转化为Blob类型.
这时需要使用FileReader读取文件,具体逻辑代码如下

//downAllTask为封装的接口方法,params为请求参数downAllTask(params).then((res) => {	//实例读取文件对象    const r = new FileReader();    r.onload = function () {    try {    	// this.result为FileReader获取blob数据,如果返回报错信息,则是正确的json数据,JSON.parse会正常转换    	//如果返回文件流,则JSON.parse时会报错,走catch代码块(进行正常的文件下载)   	        const resData = JSON.parse(this.result);         //resData是后端返回的json数据        if (resData.errorcode===500) {           proxy.$message.warning(resData.msg)           return        }     }catch (error) {         let blob = new Blob([res], { type: "application/zip" });         let url = window.URL.createObjectURL(blob);         const link = document.createElement("a");          link.href = url;         link.download = "下载图片";          link.click();         URL.revokeObjectURL(url);      }    }    r.readAsText(res)}).catch((e)=>{})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28