Blazor Server通过JSInterop下载本地CSV文件为空问题求助

问题原因 #

问题确实是helper.js中link.href的引用错误导致：
你误用了data: URI协议的语法，data:协议后需要拼接编码后的实际文件内容，而你填写的是静态文件的相对路径，浏览器解析后读取不到有效内容，因此下载得到空文件。
你直接写<a>标签时使用了标准的静态资源路径引用逻辑，所以可以正常下载到完整文件。

解决方案 #

方案1：修改JS适配当前静态文件下载场景 #

直接调整helper.js的逻辑，使用标准的资源路径赋值即可：

function FileSaveAs(filename, filePath = './csv/table_export.csv'){
    const link = document.createElement('a');
    link.download = filename;
    // 直接赋值静态文件相对路径，不需要加data:前缀
    link.href = filePath;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

同时建议调整Blazor组件的异步方法写法，把async void改为async Task，避免异步操作异常无法捕获：

@inject IJSRuntime JSRuntime

<button type="button" @onclick="@DownloadFile">
    Csv
</button>

@code {
    string fileName = "csv_test.csv";
    string fileRelativePath = "./csv/table_export.csv";

    public async Task DownloadFile()
    {
        await JSRuntime.InvokeAsync<object>(
            "FileSaveAs",
            fileName,
            fileRelativePath
        );
    }
}

方案2：动态生成文件下载场景（非静态文件） #

如果后续需要下载服务端动态生成、未存储到wwwroot的文件，可以直接将文件内容编码后传递给前端，使用data: URI协议实现下载：

1. 服务端读取/生成CSV文件的文本内容或字节数组
2. 将内容按UTF8编码后拼接为data:text/csv;charset=utf-8,{编码后的内容}格式的字符串，赋值给link.href即可。

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