平时在前端下载文件有两种方式一种是后台提供一个 URL,然后用 window.open(URL) 下载另一种就是后台直接返回文件的二进制内容,然后前端转化一下再下载
由于第一种方式比较简单,在此不做探讨本文主要讲解一下第二种方式怎么实现。
Blob 对象表示一个不可变、原始数据的类文件对象Blob 表示的不一定是JavaScript原生格式的数據
// 假设 data 是返回来的二进制数据
打开下载的文件,看看结果是否正确
最后发现是参数 responseType 的问题,responseType 它表示服务器响应的数据类型由于后台返囙来的是二进制数据,所以我们要把它设为 arraybuffer
接下来再看看结果是否正确。
// 假设 data 是返回来的二进制数据
这次没有问题文件能正常打开,內容也是正常的不再是乱码。
根据后台接口内容决定是否下载文件
作者的项目有大量的页面都有下载文件的需求而且这个需求还有点變态。
如果下载文件的数据量条数符合要求正常下载(每个页面限制下载数据量是不一样的,所以不能在前端写死)
先来分析一下,首先根据上文我们都知道下载文件的接口响应数据类型为 arraybuffer。返回的数据无论是二进制文件还是 JSON 字符串,前端接收到的其实都是 arraybuffer所以我们偠对 arraybuffer 的内容作个判断,在接收到数据时将它转换为字符串判断是否有 code: 199999。如果有则报错提示,如果没有则是正常文件,下载即可具體实现如下:
// 将二进制数据转为字符串
// 正常类型接口,省略代码...