如何在C# Blazor Web应用中打开“另存为”对话框？

Blazor无法直接通过C#调用浏览器的“另存为”对话框，需要借助JavaScript互操作实现，以下是完整实现步骤：

1. 编写Blazor组件的导出逻辑 #

在你的Blazor页面/组件中添加导出按钮，并实现生成CSV内容的C#方法：

<button @onclick="ExportToCsv">导出CSV</button>

@code {
    // 模拟待导出的数据
    private List<UserData> ExportData = new List<UserData>
    {
        new UserData { Id = 1, Name = "张三", Department = "技术部" },
        new UserData { Id = 2, Name = "李四", Department = "市场部" }
    };

    // 注入JS互操作服务
    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    private async Task ExportToCsv()
    {
        // 生成CSV文本内容
        var csvText = BuildCsvContent();
        // 调用JS方法触发下载
        await JSRuntime.InvokeVoidAsync("triggerCsvDownload", "员工数据.csv", csvText);
    }

    private string BuildCsvContent()
    {
        // 构建CSV表头
        var header = "ID,姓名,部门\n";
        // 构建数据行（注意处理含逗号的字段，需用引号包裹，这里示例简化处理）
        var dataRows = string.Join("\n", ExportData.Select(item => $"{item.Id},{item.Name},{item.Department}"));
        return header + dataRows;
    }

    // 自定义数据模型示例
    public class UserData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Department { get; set; }
    }
}

2. 添加JavaScript下载逻辑 #

在wwwroot/index.html（Blazor WebAssembly）或Pages/_Layout.cshtml（Blazor Server）中插入以下JS代码：

<script>
    window.triggerCsvDownload = function(fileName, csvContent) {
        // 将CSV文本转为Blob对象，指定文件类型
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        // 创建临时下载链接
        const downloadUrl = URL.createObjectURL(blob);
        const link = document.createElement('a');
        
        link.href = downloadUrl;
        // 设置下载文件名，触发浏览器“另存为”对话框
        link.setAttribute('download', fileName);
        
        // 触发点击并清理资源
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(downloadUrl);
    }
</script>

核心说明 #

• JS互操作必要性：浏览器的文件下载属于前端API范畴，C#无法直接调用，必须通过IJSRuntime桥接JS实现。
• Blob对象作用：将纯文本的CSV内容包装为浏览器可识别的文件对象，确保正确触发下载流程。
• 文件名控制：通过download属性指定默认文件名，浏览器会自动弹出“另存为”对话框供用户选择保存路径。

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