如何实现API生成Excel文件并返回前端，支持弹窗或自动下载？

核心实现思路 #

后端API负责生成Excel文件流，通过响应头指定文件类型与下载规则；前端通过请求API，根据需求触发弹窗下载或自动下载逻辑。

修正后的后端API代码 #

原API仅创建了空流，需补充Excel内容生成逻辑（以下示例使用EPPlus库，需先安装EPPlus NuGet包）：

using OfficeOpenXml;
using System.IO;
using System.Net;
using System.Net.Http.Headers;
using System.Web.Http;

[HttpGet]
[Route("api/ExportToExcelV1")]
public HttpResponseMessage ExportToExcelV1()
{
    // EPPlus 5+需设置许可上下文
    ExcelPackage.LicenseContext = LicenseContext.NonCommercial;
    
    // 创建Excel并写入示例数据
    using var stream = new MemoryStream();
    using var package = new ExcelPackage(stream);
    var worksheet = package.Workbook.Worksheets.Add("数据列表");
    
    // 写入表头
    worksheet.Cells["A1"].Value = "ID";
    worksheet.Cells["B1"].Value = "名称";
    worksheet.Cells["C1"].Value = "创建时间";
    // 写入数据行
    worksheet.Cells["A2"].Value = 1;
    worksheet.Cells["B2"].Value = "测试数据1";
    worksheet.Cells["C2"].Value = DateTime.Now.ToString("yyyy-MM-dd");
    worksheet.Cells["A3"].Value = 2;
    worksheet.Cells["B3"].Value = "测试数据2";
    worksheet.Cells["C3"].Value = DateTime.Now.ToString("yyyy-MM-dd");
    
    // 保存Excel到流并重置指针
    package.Save();
    stream.Position = 0;

    // 构建响应
    var result = new HttpResponseMessage(HttpStatusCode.OK)
    {
        Content = new ByteArrayContent(stream.ToArray())
    };
    
    // 设置下载响应头：attachment触发下载，inline可在浏览器预览
    result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
    {
        FileName = $"ABC-{DateTime.Now:yyyyMMddHHmmssfff}.xlsx"
    };
    result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");

    return result;
}

前端两种下载实现方式 #

原提供的“前端代码”实际是后端服务调用API的逻辑，以下是浏览器端JavaScript的两种下载实现：

方式1：弹窗下载（用户点击触发） #

通过创建a标签模拟点击，触发浏览器下载弹窗：

async function downloadExcelPopup() {
    const apiUrl = "https://localhost:7057/api/ExportToExcelV1";
    const response = await fetch(apiUrl);
    
    if (!response.ok) throw new Error("导出请求失败");
    
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    
    a.href = url;
    // 从响应头解析文件名，无则使用默认值
    const filename = response.headers.get("Content-Disposition")?.split("filename=")[1] || "导出数据.xlsx";
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    
    // 清理临时资源
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
}

方式2：自动下载（无需用户手动点击） #

逻辑与弹窗下载一致，直接触发下载动作：

async function autoDownloadExcel() {
    const apiUrl = "https://localhost:7057/api/ExportToExcelV1";
    const response = await fetch(apiUrl);
    
    if (!response.ok) throw new Error("导出请求失败");
    
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    
    a.href = url;
    const filename = response.headers.get("Content-Disposition")?.split("filename=")[1] || "导出数据.xlsx";
    a.download = filename;
    document.body.appendChild(a);
    // 直接触发点击完成自动下载
    a.click();
    
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
}

注意事项 #

• 若需支持Excel在线预览，可将API响应头的Content-Disposition值改为inline。
• 跨域场景下，需确保后端配置CORS策略，允许前端域名访问。
• EPPlus库商业环境使用需购买授权，非商业环境可使用非商业许可。

内容的提问来源于stack exchange，提问作者GPService