vue:文件下载

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

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

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

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

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

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

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

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

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

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

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

  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对象
        }
      });
    },

你可能感兴趣的:(vue.js,javascript,前端)