vue：文件下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue：文件下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

if (res.status === 200) {: 这一行代码检查 HTTP 响应的状态是否为 200，表示请求成功。只有在成功的情况下才会执行后续的文件下载操作。
const blob = new Blob([res.data]);: 使用响应中的数据创建一个 Blob 对象。Blob 是二进制大对象，用于表示二进制数据。
const downloadElement = document.createElement('a');: 创建一个 <a> 元素，用于设置下载链接。
const href = window.URL.createObjectURL(blob);: 使用 URL.createObjectURL 创建一个包含 Blob 对象的 URL。这个 URL 将在后续用于文件下载。
downloadElement.href = href;: 将刚才创建的 URL 设置为 <a> 元素的 href 属性，以便关联下载链接。
downloadElement.download = item.fileName;: 设置下载时的文件名。item.fileName 是文件的名称，会在下载时使用。
document.body.appendChild(downloadElement);: 将 <a> 元素添加到文档的 body 中。这是为了触发下载，因为浏览器需要在文档中存在的元素上进行点击事件。
downloadElement.click();: 模拟点击 <a> 元素，触发文件下载。
document.body.removeChild(downloadElement);: 文件下载完成后，将 <a> 元素从文档中移除。这一步是为了清理文档结构，避免对页面产生影响。
window.URL.revokeObjectURL(href);: 释放之前创建的 Blob 对象的 URL。这是为了释放浏览器资源，防止内存泄漏。

这一系列操作实现了通过浏览器触发文件下载的过程。要注意，这种方式适用于现代浏览器，但在一些旧版本的浏览器中可能存在兼容性问题。文章来源地址https://www.toymoban.com/news/detail-801799.html

 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：文件下载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！