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)
      小道研究的头像小道研究
      上一篇 2024年4月18日
      下一篇 2024年4月18日

      相关推荐

      发表回复

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