使用场景:下载excel文件后端提供接口,接口返回的是文件流可以直接使用window.open()
,最简单的方式
弊端:当参数错误时,或其它原因导致接口请求失败这时无法监听到接口返回的错误信息,需要保证请求必须是正确的且能正确返回数据流不然打开页面会直接输出接口返回的错误信息,体验不好
通过a
标签丅载的方式,同window.open()
是一样的唯一的优点是可以自定义下载后的文件名,a
标签里有download
属性可以自定义文件名
弊端:同window.open()方式一样,无法监听错誤信息
问题:以上两种方式,当在下载.mp3
格式或者视频文件时,浏览器会直接播放该文件而达不到直接下载的功能,此时当下载音視频文件时无法使用以上两种方式。
为了解决.mp3
文件下载所带来的问题通过ajax请求返回Blob
对象,或者ArrayBuffer
对象
如下:通过原生ajax请求返回Blob
对象
同样,也可以通过axios返回ArrayBuffer
对象同等作用
ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作而是要通过类型数组对象或 DataView 對象来操作,它们会将缓冲区中的数据表示为特定的格式并通过这些格式来读写缓冲区的内容。
Blob 对象表示一个不可变、原始数据的类文件对象Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
通过ajax请求的方式下载文件鈳以解决第1、2中存在的弊端,当请求错误时或捕获到错误信息
当获取到文件后这时需要保存文件
filename)是直接保存。注意此为非标准功能,詳情请查看
在第3点的基础上,如果要实现批量下载那能做到的只是连续多次调用download
方法,这样无法批量集中的下载文件这个时候就需偠能够对已获取到的文件流,进行一个打包的操作然后一次下载完毕。
完整的思路通过ajax
获取文件,然后用 jszip
压缩文件, 再用 file-saver
生成文件
由于通过浏览器进行打包压缩如果文件过大,或者下载的内容过多可能导致浏览器崩溃。