axios下载大文件_Axios如何下载文件

如果在项目中第一次遇到下载、导出文件的时候，我们都会直接去请求API，期望会下载一个文件到本地，然后我们可以打开它。但是看到的结果却出乎意料。

接口返回的二进制流

并没有出现期望的情形，而是返回了一堆“乱码”。

AJAX无法下载文件的原因

下载其实是浏览器的内置事件，浏览器的 GET请求（frame、a）、 POST请求（form）具有如下特点：

• response会交由浏览器处理
• response内容可以为二进制文件、字符串等

但是AJAX请求不一样：

• response会交由 Javascript 处理
• response内容只能接收字符串才能继续处理

因此，AJAX本身无法触发浏览器的下载功能。

Axios如何实现下载

• 发送请求
• 获得response
• 通过response判断返回是否为流文件
• 如果是文件则在页面中插入frame/a标签
• 利用frame/a标签实现浏览器的get下载

首先封装一个download方法，用于发送请求

// request.js

拿到response之后我们需要将流文件通过浏览器下载

// utils.js

缺点

• download请求方法与convertRes2Blob处理文件下载的方法，需要分开调用
• download使用独立的实例，不能公用一个axios，基础配置需要单独维护

参考

XMLHttpRequest.responseType​developer.mozilla.org

MIME 类型​developer.mozilla.org

使用vue.js axios 下载功能？​www.zhihu.com