1. 速盾网络首页
  2. 网站运维

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

小道研究 • • 网站运维

项目中需要下载文件，我一般的写法就是拼接字符串，然后赋值给 A 标签，模拟点击事件，就可以直接下载「后端返回的文件流」
项目中碰到一个问题：后端要求验证 Token，那 A 标签的方法就不合理了。所以，就需要用 Get 去请求，headers 里面添加上 Token ，来获取后端返回的资源。
逻辑是这个逻辑，让我 Get 请求没问题，后端返回数据后，那怎样把文件下载下来呢？
Blob 对象
浏览器提供了一个 Blob 构造函数，用来生成实例对象。Blob 对象表示一个二进制的数据内容，它通常用来读写文件。
比如：图片文件的内容就可以用 Blob 对象读写。

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

  1. Ajax 请求配置 responseType
  2. 后端返回「二进制数据」或者 JSON
  3. 新建立 new Blob 生成实例对象
  4. 使用 URL.createObjectURL 生成临时的 URL
  5. 创建 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 相关协议

      推荐阅读：

      Vue 如何调试源码
      虚拟 DOM 是怎样生成的？

      JavaScript 性能测试

      参考资料：

      [1]https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType

      [2]https://wangdoc.com/javascript/bom/arraybuffer.html

      [3]https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

      原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34555.html

      赞 (0)
      小道研究's avatar小道研究
      0 0
      上一篇 2024年4月18日 下午12:17
      下一篇 2024年4月18日 下午12:19

      相关推荐

      发表回复

      您的邮箱地址不会被公开。 必填项已用 * 标注