# 文件下载与保存

URL: https://caijiao.org/axios/file-transfer/download
Source: docs/axios/file-transfer/download.md
Description: 本章节讲解如何使用 Axios 下载文件，包括设置 responseType、处理 Blob 数据以及前端保存文件的实现方法，帮助前端项目实现用户友好的文件下载功能。

在前端项目中，有时需要下载文件（如图片、PDF 或 Excel），Axios 提供了灵活的方式处理二进制数据并保存到本地。

## 1. 下载文件并处理 Blob

```javascript
import axios from "axios";

axios
  .get("/files/report.pdf", {
    responseType: "blob", // 表示获取二进制数据
  })
  .then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "report.pdf"); // 设置下载文件名
    document.body.appendChild(link);
    link.click();
    link.remove();
  })
  .catch((error) => console.error("下载失败：", error));
```

## 2. 使用 Axios 配合文件保存库

```javascript
import axios from "axios";
import FileSaver from "file-saver";

axios
  .get("/files/report.xlsx", { responseType: "blob" })
  .then((res) => {
    FileSaver.saveAs(res.data, "report.xlsx");
  })
  .catch((err) => console.error(err));
```

## 3. 支持大文件下载

- 可使用 `onDownloadProgress` 监听下载进度：

```javascript
axios.get("/files/large.zip", {
  responseType: "blob",
  onDownloadProgress: (progressEvent) => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(`下载进度：${percentCompleted}%`);
  },
});
```

## 4. 优势

- **方便用户操作**：提供可自定义文件名的下载功能；
- **进度可视化**：可实时显示下载进度；
- **兼容多类型文件**：支持 PDF、Excel、图片、压缩包等文件类型。

---

> 💡 小提示：在下载大文件时，建议使用 `responseType: 'blob'` 并结合进度回调提升用户体验，同时避免页面卡顿。