现在前端环境业务需求越来越多,下载早已是主流的功能,对于前端来说再正常不过的功能,现在来撸一个原生的下载组件
1.先定义一个函数,准备前端下载需要的参数,一般来说就是api,参数对象和文件名
2.参数进入函数需要处理成能接受的形态,遍历传进来的data,进行拼接组装,并和接口域名进行拼接成一个完整的接口,引入个lodash判断参数是否为空
XMLHttpRequest可以用于获取任何类型的数据,而不仅仅是XML,它还支持 HTTP以外的协议(包括文件和ftp)
3.做好前面的链接参数处理,再用Promise做下载的逻辑处理;使用XMLHttpRequest (XHR)对象可以与服务器交互,初始化一个请求,并设置好method,url,async。再设置responseType响应类型的枚举值,最后,setRequestHeader设置HTTP请求头的值。必须在open()之后、send()之前调用setRequestHeader()这个方法。
4.请求成功完成时要执行的函数,当返回200时开始正式的下载逻辑,增加传参pyload和sendType。
A.注解:使用 Blob 构造函数可以直接在客户端上创建和操作 Blob(通常等效于一个文件)。Internet Explorer 10 的 msSaveBlob 和 msSaveOrOpenBlob 方法允许用户在客户端上保存文件,所以这是IE浏览器的下载操作方法。
B.URL.createObjectURL()
静态方法会创建一个 DOMString
,其中包含一个表示参数中给出的对象的URL,通俗的来说就是新建一个新的 URL 对象。
C.safari不支持这个下载功能的话, 就用a标签的新属性download;注解:在 HTML5 中,download 属性是 <a> 标签的新属性。
D.最后我们要关注这个内存管理,MDN web文档注解:在每次调用 createObjectURL()
方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL()
方法来释放,所以最后做个计时器异步延时调用revokeObjectURL来释放对象
5.做一些下载时的api请求拦截Request Headers设置参数
6.最后导出这个函数,export default filedownload,就可以实现下载各种格式文件的功能
import filedownload from '@/filedown.js'