ajax下载文件到本地（ajaxform需要jquery插件从哪里下载）

项目中需要下载文件，我一般的写法就是拼接字符串，然后赋值给 A 标签，模拟点击事件，就可以直接下载「后端返回的文件流」

项目中碰到一个问题：后端要求验证 Token，那 A 标签的方法就不合理了。所以，就需要用 Get 去请求，headers 里面添加上 Token ，来获取后端返回的资源。

逻辑是这个逻辑，让我 Get 请求没问题，后端返回数据后，那怎样把文件下载下来呢？

Blob 对象

浏览器提供了一个 Blob 构造函数，用来生成实例对象。Blob 对象表示一个二进制的数据内容，它通常用来读写文件。

比如：图片文件的内容就可以用 Blob 对象读写。

我来梳理下载文件的流程：

Ajax 请求配置 responseType
后端返回「二进制数据」或者 JSON
新建立 new Blob 生成实例对象
使用 URL.createObjectURL 生成临时的 URL
创建 A 标签执行下载

1、Ajax 请求配置

设置 XMLHttpRequest 的 responseType 返回响应数据的类型，就是后端给你返回的数据格式。可以设置 json、text、blob、arraybufer等 …

默认为空，返回的是 text 类型。其中 arraybuffer 和 blob 都用来处理二进制流。区别在于 arraybuffer 是内存数据的表达「普通页面用不到，至少我没用到过」，blob 表示二进制文件的数据内容。

/*** XMLHttpRequest.responseType* 我用的是 axios*/axios.get(url, {    responseType: \\\"blob\\\",//别忘记设置    params: {}}).then(res => {    console.log(res);})

2、二进制数据或JSON

需要后端配合返回「二进制数据」或 JSON。

我项目需要下载 Excel 文件，一开始后端返回的是JSON 文件，我这边一直解析不出来，解析后也是 [Object] ，后面就换成了「二进制数据」格式，解析成功 …

我自己在本地尝试使用 JSON 是可以成功的。

3、Blob 实例对象

获取到后端的 Blob 数据后，需要解析出来。后端返回的数据包含两个参数size 和 type，表示数据大小和数据类型。

「数据类型」很重要，解析的时候要注意使用什么类型解析。

new Blob(array [, options])

Blob 构造函数返回一个新的 Blob 对象。可以接收两个参数，第一个是对象构成的 Array ，或者其他类似对象的混合体。第二个是可选的，目前只有一个 type 属性「默认是空字符串」它的值就是一个字符串，表示数据的 MIME 类型。

官方例子：

let htmlFragment = [\\\'<a id=\\\"a\\\"><b id=\\\"b\\\">hey!</b></a>\\\'];let myBlob = new Blob(htmlFragment, {type : \\\'text/html\\\'});

我在项目中解析为 xlsx 格式：

let blob = new Blob([res.data], {type: \\\'application/vnd.ms-excel\\\'});

4、生成临时的 URL

let objectURL = window.URL.createObjectURL(blob);//创建下载的链接

用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。

在每次调用 createObjectURL 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL 方法来释放。

我们是用 Blob 创建的临时 URL ，所以路径格式是「blob://URL」

5、创建 A 标签，下载文件

上面生成临时 URL 后，就可以创建 A 标签，去赋值 href ，并且模拟点击，实现下载。

文件名称是后端生成的，我如何拿到文件名呢？

//获取文件名let disposition = res.headers[\\\'content-disposition\\\'];let _name = disposition.split(\\\'filename=\\\')[1].split(\\\';\\\')[0];

//创建 A 标签，模拟点击var creatA = document.createElement(\\\"a\\\");creatA.href = url;document.body.appendChild(creatA);creatA.click();

要记得释放 createObjectURL 创建的临时链接。

想要实现下载 HTML 页面，如何设置？

var data = \\\"<div style=\\\'color:red;\\\'>This is a blob</div>\\\";var blob = new Blob([data], { type: \\\'text/html\\\' });var blobURL = URL.createObjectURL(blob);

图片授权基于：www.pixabay.com 相关协议

ajax下载文件到本地（ajaxform需要jquery插件从哪里下载）

相关推荐

泛微E（泛微e10）

WEB渗透Web突破篇，web渗透技术及实战案例解析

android适配器，如何才能通过一线互联网公司面试？真香_android面试题适配器和适配器控件

电商网站在选择后端框架时，如何评估框架的性能和可扩展性？

发表回复