在项目的应用过程中,需要将后台返回的二进制文件转换成我们想要的文件,在这里我们就要用到一个叫Blob的东西;
Blob:他是js的操作对象类,html5的文件操作对象,blob是用来存储二进制数据,Blob本身的对象还有两个属性,一个是type,一个是size; Blob还有一个叫slice()的属性,他是用来截取,不过他截取的是二进制数据,一般在大文件上传时,由于数据上传的大小受到限制,所以我们需要利用slice属性去切割数据 好了,进入正题,前面是一个对Blob的简单介绍,接下来,小姐姐带你们进入如何使用他:
正式用法介绍: 1.首先我们需要创建一个blob对象,我们通过Blob()构造函数来创建blob对象,如下: var blob=new Blob( ["数据"] , { type:'text/plain' } ) //创建Blob对象
他的构造函数含有两个参数: 第一个参数是一个数据数列,他可以是任何格式的数据,第二个是type,他是一个MIME的嗅探类型,
2.如果我们我们需要下载文件,则需要用到a标签的download属性;
代码如上; 这里的fileName定义为你想要导出的文件名以及格式 let fileName =测试.xlsx
,
let fileName = 测试.do'c
如果到这里你发现下载后文件打不开,一定千万不要打我,这里我们在请求api的时候,一定要设置response的类型为blob responseType: 'blob'; 代码如下:
export function apitest(id,params){
return request({
url: `url`,
method: 'get',
params,
responseType: 'blob'
})
}
-----------------------------------我是华丽丽的分割线--------------------------------------------------------------- 由于后续项目需要兼容火狐浏览器,所以我们需要在代码中加入兼容火狐浏览器
link.download = fileName
document.body.appendChild(link)
加入以上的代码就可以兼容火狐浏览器