在 Vue 页面中使用 Axios POST 请求从 ASP.NET Core Web API 下载文件

在 Vue 页面中使用 Axios POST 请求从 ASP.NET Core Web API 下载文件

在现代 Web 应用中，文件下载是一个常见的需求，例如导出报告、下载附件等。在本文中，我们将介绍如何在 Vue 项目中使用 Axios 发起 POST 请求，并从 ASP.NET Core Web API 接收文件，同时完成文件的下载。

---

一、前端：Vue 中的 Axios 配置和下载实现

1. 安装 Axios

如果你的项目中还没有安装 Axios，可以通过以下命令安装：

npm install axios

2. 在 Vue 页面中实现文件下载

以下是一个完整的示例：

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script setup>
import axios from 'axios';

async function downloadFile() {
      try {
        // 发起 POST 请求到后端 API
        const response = await axios.post(
          'http://localhost:5000/api/FileDownload/download', // 替换为你的 API 地址
          { name: 'JohnDoe' }, // 请求体参数
          {
            responseType: 'blob', // 指定响应类型为 blob
          }
        );

        // 从响应头中提取文件名
        const contentDisposition = response.headers['content-disposition'];
        let fileName = 'downloaded_file.txt'; // 默认文件名
        if (contentDisposition) {
          const matches = contentDisposition.match(/filename="?([^"]+)"?/);
          if (matches && matches[1]) {
            fileName = matches[1];
          }
        }

        // 创建 Blob 对象并触发下载
        const blob = new Blob([response.data]);
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error('文件下载失败:', error);
      }
    }
</script>

3. 代码解析

• responseType: 'blob'

  • 告诉 Axios 将响应解析为二进制数据。

• 提取文件名

  • 通过响应头 Content-Disposition 提取文件名，确保下载文件名与后端一致。

• 触发下载

  • 使用 Blob 对象创建文件数据并通过 <a> 标签模拟下载。

---

二、后端：ASP.NET Core Web API 返回文件

在 ASP.NET Core 中，我们可以通过 File 方法返回文件，并设置必要的响应头。

1. 示例 API 控制器

以下是一个实现文件下载的控制器示例：

using Microsoft.AspNetCore.Mvc;
using System.Text;

[Route("api/[controller]")]
[ApiController]
public class FileDownloadController : BaseController
{
    [HttpPost("download")]
    public async Task<FileContentResult> Download(FileRequest request)
    {
        // 动态生成文件内容
        string fileContent = $"Hello, {request.Name}! This is your file.";
        byte[] fileBytes = Encoding.UTF8.GetBytes(fileContent);
        string mimeType = "text/plain";
        string fileName = $"{request.Name}_file.txt";

        // 返回文件
        return File(fileBytes, mimeType, fileName);
    }
}

public class FileRequest
{
    public string Name { get; set; }
}

2. 代码解析

• 动态生成文件内容

  • 示例中，文件内容是动态生成的，但你可以从磁盘、数据库等位置读取文件内容。

• Content-Disposition

  • File 方法会自动设置 Content-Disposition: attachment; filename="fileName"，确保文件下载时具备正确的文件名。

• 返回文件

  • return File(byte[], string, string) 是 ASP.NET Core 提供的快捷方法，可以轻松返回文件内容、MIME 类型和文件名。

---

三、完整流程解析

1. 前端请求

   Vue 页面通过 Axios 发送 POST 请求，携带必要的参数（如文件名、用户 ID 等）。

2. 后端生成文件

   ASP.NET Core Web API 根据请求生成或检索文件，设置正确的 MIME 类型和响应头。

3. 前端接收文件

   前端接收到文件的二进制数据后，通过 Blob 和 <a> 标签创建下载链接并触发下载。

---

四、常见问题

1. 文件名显示为 Unknown 或缺失

确保后端返回的 Content-Disposition 响应头格式正确，例如：

Content-Disposition: attachment; filename="example.txt"

2. 文件无法正常下载或内容乱码

• 检查前端 responseType 是否设置为 'blob'。
• 确认后端返回的文件 MIME 类型和编码是否正确。

3. 如何处理大文件？

对于大文件，可以使用流式传输代替完整加载到内存的方法，例如使用 FileStreamResult。

---

五、总结

通过本文，我们实现了一个完整的文件下载流程，涵盖了前端 Vue 的 Axios 调用和后端 ASP.NET Core Web API 的文件返回。此方法适用于多种文件类型（如 PDF、Excel、ZIP 等），只需调整 MIME 类型和文件内容即可。

希望这篇文章能帮助你快速上手文件下载功能！