菜鸟教程
教程 axios tutorial

文件下载与保存

在前端项目中，有时需要下载文件（如图片、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' 并结合进度回调提升用户体验，同时避免页面卡顿。

相关内容