1.下载方法是通过创建 Blob 对象,并使用 URL.createObjectURL 来生成下载链接,最终通过创建 <a> 元素并触发点击实现文件下载。

获取到 HTTP 响应后,以下是对每一行代码的解释:

  1. if (res.status === 200) {: 这一行代码检查 HTTP 响应的状态是否为 200,表示请求成功。只有在成功的情况下才会执行后续的文件下载操作。

  2. const blob = new Blob([res.data]);: 使用响应中的数据创建一个 Blob 对象。Blob 是二进制大对象,用于表示二进制数据。

  3. const downloadElement = document.createElement('a');: 创建一个 <a> 元素,用于设置下载链接。

  4. const href = window.URL.createObjectURL(blob);: 使用 URL.createObjectURL 创建一个包含 Blob 对象的 URL。这个 URL 将在后续用于文件下载。

  5. downloadElement.href = href;: 将刚才创建的 URL 设置为 <a> 元素的 href 属性,以便关联下载链接。

  6. downloadElement.download = item.fileName;: 设置下载时的文件名。item.fileName 是文件的名称,会在下载时使用。

  7. document.body.appendChild(downloadElement);: 将 <a> 元素添加到文档的 body 中。这是为了触发下载,因为浏览器需要在文档中存在的元素上进行点击事件。

  8. downloadElement.click();: 模拟点击 <a> 元素,触发文件下载。

  9. document.body.removeChild(downloadElement);: 文件下载完成后,将 <a> 元素从文档中移除。这一步是为了清理文档结构,避免对页面产生影响。

  10. window.URL.revokeObjectURL(href);: 释放之前创建的 Blob 对象的 URL。这是为了释放浏览器资源,防止内存泄漏。

这一系列操作实现了通过浏览器触发文件下载的过程。要注意,这种方式适用于现代浏览器,但在一些旧版本的浏览器中可能存在兼容性问题。

 downloadFile(item) {
      const headers = {
        Authorization: `Bearer ${getToken()}`,
      };

      Axios({
        method: 'GET',
        url: `${webAPI.services.landmis}file/download`,
        params: { id: item.id },
        responseType: 'blob',
        headers,
      }).then((res) => {
        // 请求成功后处理流
        if (res.status === 200) {
          const blob = new Blob([res.data]);
          const downloadElement = document.createElement('a');
          const href = window.URL.createObjectURL(blob); // 创建下载的链接
          downloadElement.href = href;
          downloadElement.download = item.fileName; // 下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); // 点击下载
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        }
      });
    },

值得注意的:

1.需不需要告诉其类型

const blob = new Blob([res], { type: 'application/octet-stream' });

2.下载接口的位置要不要标明类型,否则不知道是什么类型

 resType:'blob'

GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐