如何用 JavaScript 下载文件

---

一、如何用 JavaScript 下载文件

在现代Web应用程序中，下载文件是一个常见的需求。本文将详细介绍如何使用JavaScript和Axios库来实现文件下载，并探讨一些关键点和注意事项。

1. 准备工作

首先，确保你已经安装了Axios库。如果还没有安装，可以使用以下命令通过npm进行安装：

npm install axios

在HTML文件中引入Axios：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 创建下载函数

下面是一段完整的代码示例，展示了如何使用Axios实现文件下载：

const openFile = async (file) => {
  try {
    const response = await axios.get("/bbjApi/system/systemfile/" + file.id, {
      responseType: "blob", // 设置响应类型为 blob
    });
    const blob = new Blob([response.data], {
      type: response.headers["content-type"],
    });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    // 设置文件名和扩展名
    link.setAttribute("download", file.name);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url); // 释放对象 URL
  } catch (error) {
    ElMessage.error("openFile接口异常请联系管理员");
  }
};

3. 代码解析

让我们一步步解析这段代码：

1. Axios请求：通过axios.get方法发送GET请求，responseType设置为blob，表示响应数据以二进制大对象（Blob）的形式返回。

   const response = await axios.get("/bbjApi/system/systemfile/" + file.id, {
     responseType: "blob",
   });
   

2. 创建Blob对象：创建一个Blob对象，用于存储下载的数据。Blob是一个表示二进制数据的不可变、原始数据类。

   const blob = new Blob([response.data], {
     type: response.headers["content-type"],
   });
   

3. 生成下载链接：使用URL.createObjectURL方法为Blob对象创建一个临时URL。

   const url = window.URL.createObjectURL(blob);
   

4. 创建并触发下载链接：创建一个隐藏的a标签，并设置其href属性为Blob的URL，download属性为文件名，然后模拟点击事件来下载文件。

   const link = document.createElement("a");
   link.href = url;
   link.setAttribute("download", file.name);
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
   

5. 释放对象URL：下载完成后，使用window.URL.revokeObjectURL方法释放之前创建的对象URL，以节省内存。

   window.URL.revokeObjectURL(url);
   

6. 错误处理：在请求过程中，如果发生错误，将弹出错误提示信息。

   ElMessage.error("openFile接口异常请联系管理员");
   

4. 注意事项

• 跨域问题：如果API服务器与前端服务器不在同一个域，需要处理跨域问题。可以通过CORS（跨域资源共享）在服务器端进行配置。
• 文件名和扩展名：确保从服务器获取正确的文件名和扩展名，以便用户下载的文件有正确的名称和类型。
• Blob对象和内存管理：Blob对象占用内存较多，在使用完后一定要调用revokeObjectURL方法释放内存。

5. 总结

本文详细介绍了如何使用JavaScript和Axios库来实现文件下载，从发送请求、处理响应到创建下载链接都进行了详细说明。希望通过这篇文章，你能更好地掌握文件下载的实现方式，并在实际项目中灵活运用。如果有任何疑问或进一步的需求，请随时提出。Happy coding!