在 Vue 页面中使用 Axios POST 请求从 ASP.NET Core Web API 下载文件
在现代 Web 应用中，文件下载是一个常见的需求，例如导出报告、下载附件等。在本文中，我们将介绍如何在 Vue 项目中使用 Axios 发起 POST 请求，并从 ASP.NET Core Web API 接收文件，同时完成文件的下载。
一、前端：Vue 中的 Axios 配置和下载实现
1. 安装 Axios
如果你的项目中还没有安装 Axios，可以通过以下命令安装：
npm install axios2. 在 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'
提取文件名
通过响应头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 类型和文件名。 三、完整流程解析
前端请求
Vue 页面通过 Axios 发送 POST 请求，携带必要的参数（如文件名、用户 ID 等）。
后端生成文件
ASP.NET Core Web API 根据请求生成或检索文件，设置正确的 MIME 类型和响应头。
前端接收文件
前端接收到文件的二进制数据后，通过 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 类型和文件内容即可。
希望这篇文章能帮助你快速上手文件下载功能！