ASP.NET Core 2中下载文件后如何更新页面？

嘿，我来帮你搞定这个问题——当你用ExportDataAsPDF方法返回FileStreamResult时，浏览器只会触发PDF下载，不会自动更新页面。要实现页面更新，得结合前端逻辑或者后端的状态传递/跳转来做，下面是几种实用的方案：

方案一：前端触发下载后手动刷新页面（最简单快捷） #

如果你的需求只是导出后刷新整个页面，直接在前端用JS处理下载事件，延迟触发页面刷新即可。这样不用改动后端代码，只需要调整前端交互：

方式1：用window.open触发下载+刷新 #

<button onclick="exportAndRefresh()">导出PDF并刷新页面</button>

<script>
function exportAndRefresh() {
    // 打开导出接口，触发浏览器下载
    window.open('/YourController/ExportDataAsPDF?SearchTerm=xxx&其他参数', '_blank');
    // 延迟1秒刷新，给浏览器足够时间处理下载请求
    setTimeout(() => {
        location.reload();
    }, 1000);
}
</script>

方式2：AJAX获取Blob下载+刷新 #

如果是POST请求（比如你的BerichteSearch模型参数较多），用AJAX获取PDF的Blob对象，手动触发下载后再刷新：

async function exportAndRefresh() {
    const formData = new FormData();
    // 把BerichteSearch的参数逐个添加到FormData
    formData.append("SearchTerm", document.getElementById("SearchTerm").value);
    formData.append("StartDate", document.getElementById("StartDate").value);
    // 其他参数...

    const response = await fetch('/YourController/ExportDataAsPDF', {
        method: 'POST',
        body: formData
    });

    if (response.ok) {
        const blob = await response.blob();
        // 创建临时下载链接
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'report.pdf';
        document.body.appendChild(a);
        a.click();
        // 清理临时资源
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);

        // 下载完成后刷新页面
        location.reload();
    }
}

方案二：后端传递状态+跳转回原页面（带状态反馈） #

如果需要给用户展示“导出成功”的提示，或者要传递一些状态到页面，可以让后端先保存PDF到临时位置，然后跳转回原页面，用TempData传递状态和下载链接：

后端修改代码 #

public async Task<IActionResult> ExportDataAsPDF(BerichteSearch model)
{
    // 你的PDF生成逻辑，比如生成memoryStream
    var memoryStream = await GeneratePDFContent(model);
    var fileName = $"Report_{DateTime.Now:yyyyMMddHHmmss}.pdf";

    // 将PDF保存到服务器临时目录
    var tempPath = Path.Combine(Path.GetTempPath(), fileName);
    using (var fileStream = new FileStream(tempPath, FileMode.Create))
    {
        await memoryStream.CopyToAsync(fileStream);
    }

    // 用TempData传递导出状态和下载链接
    TempData["ExportSuccess"] = "PDF导出完成！";
    TempData["DownloadLink"] = Url.Action("DownloadTempPDF", new { fileName = fileName });

    // 跳回原页面（比如你的搜索列表页Index）
    return RedirectToAction("Index");
}

// 新增临时PDF下载接口
public IActionResult DownloadTempPDF(string fileName)
{
    var tempPath = Path.Combine(Path.GetTempPath(), fileName);
    if (!System.IO.File.Exists(tempPath))
    {
        return NotFound();
    }

    var fileStream = new FileStream(tempPath, FileMode.Open);
    // 下载完成后删除临时文件（可选，避免服务器占用空间）
    System.IO.File.Delete(tempPath);

    return File(fileStream, "application/pdf", fileName);
}

前端页面（Index.cshtml）展示状态 #

@* 显示导出成功提示 *@
@if (TempData["ExportSuccess"] != null)
{
    <div class="alert alert-success">
        @TempData["ExportSuccess"]
        <a href="@TempData["DownloadLink"]" class="ms-2">点击下载PDF</a>
    </div>
}

@* 导出表单 *@
<form asp-action="ExportDataAsPDF" method="post">
    @* 你的BerichteSearch模型表单字段 *@
    <input type="text" asp-for="SearchTerm" class="form-control mb-2" />
    <input type="date" asp-for="StartDate" class="form-control mb-2" />
    <button type="submit" class="btn btn-primary">导出PDF</button>
</form>

方案三：AJAX下载+局部更新页面（无需整页刷新） #

如果不想刷新整个页面，只想更新部分内容（比如数据列表、状态提示），可以用AJAX下载PDF后，直接修改页面DOM元素：

前端代码 #

<div id="loading-indicator" style="display: none; color: #0d6efd;">正在导出PDF...</div>
<div id="export-status" class="mt-2"></div>
<button onclick="exportPDFAndUpdateContent()" class="btn btn-primary">导出PDF并更新数据</button>

<script>
async function exportPDFAndUpdateContent() {
    const loadingElement = document.getElementById('loading-indicator');
    const statusElement = document.getElementById('export-status');
    
    // 显示加载状态
    loadingElement.style.display = 'block';
    statusElement.textContent = '';

    try {
        const formData = new FormData();
        // 填充模型参数
        formData.append("SearchTerm", document.getElementById("SearchTerm").value);
        // 其他参数...

        const response = await fetch('/YourController/ExportDataAsPDF', {
            method: 'POST',
            body: formData
        });

        if (response.ok) {
            const blob = await response.blob();
            // 触发PDF下载
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'report.pdf';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);

            // 更新页面状态和内容
            statusElement.textContent = 'PDF导出完成！';
            statusElement.className = 'mt-2 text-success';
            // 调用方法刷新页面数据列表（比如重新获取最新数据）
            await refreshDataList();
        } else {
            statusElement.textContent = '导出失败，请重试';
            statusElement.className = 'mt-2 text-danger';
        }
    } catch (error) {
        statusElement.textContent = `导出出错：${error.message}`;
        statusElement.className = 'mt-2 text-danger';
    } finally {
        // 隐藏加载状态
        loadingElement.style.display = 'none';
    }
}

async function refreshDataList() {
    // 调用API获取最新数据并更新页面列表
    const response = await fetch('/YourController/GetLatestData');
    const data = await response.json();
    
    // 示例：更新数据列表DOM
    const listElement = document.getElementById('data-list');
    listElement.innerHTML = '';
    data.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item.Name;
        listElement.appendChild(li);
    });
}
</script>

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