Blazor Server通过IJSRuntime向JavaScript传输大字符串失败如何解决？

问题根因 #

你遇到的故障核心是Blazor Server底层依赖的SignalR默认限制了单次消息的最大传输大小，默认值仅为32KB，你传输几十MB的Base64字符串远超这个阈值，会直接导致SignalR连接断开，所以代码卡在js.InvokeAsync这步，根本不会执行后续的JS逻辑。另外Base64编码会让数据体积额外膨胀33%，同时Chrome对data URI的大小也有几十MB的上限，双重限制导致你现有方案仅适合小文件场景。

解决方案 #

方案1：使用独立下载端点（最优，支持任意大小文件）

完全绕开SignalR传输文件的限制，是生产环境的标准实现：

1. 新增API控制器处理下载请求

[ApiController]
[Route("api/[controller]")]
public class DownloadController : ControllerBase
{
    // 替换为你实际使用的文件存储服务，可选用分布式缓存、本地临时目录等
    private readonly IFileStorageService _fileStorage;

    public DownloadController(IFileStorageService fileStorage)
    {
        _fileStorage = fileStorage;
    }

    [HttpGet("{token}")]
    public async Task<IActionResult> Get(string token)
    {
        // 校验令牌有效性，过期则返回404
        var fileInfo = await _fileStorage.GetFileByTokenAsync(token);
        if (fileInfo == null) return NotFound();
        
        // 返回文件流，浏览器自动触发下载
        return File(fileInfo.Stream, "application/octet-stream", fileInfo.FileName);
    }
}

2. Blazor服务端生成下载令牌，仅传递下载地址给JS

// 把文件流存入临时存储，生成对应令牌，设置5分钟过期
var downloadToken = await _fileStorage.SaveTempFileAsync(fileName, fsrResponse.Data.FileStream);
var downloadUrl = $"/api/Download/{downloadToken}";
// 仅传文件名和下载地址给JS，数据量极小无传输压力
await js.InvokeVoidAsync("triggerDownload", fileName, downloadUrl);

3. 精简JS逻辑，直接触发下载

function triggerDownload(filename, downloadUrl) {
    try {
        const a = document.createElement('a');
        a.download = filename;
        a.href = downloadUrl;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        return true;
    } catch (e) {
        return false;
    }
}

方案2：调整SignalR配置+使用流式JS互操作（适合不想新增API的场景）

如果确实不想新增独立下载端点，可以修改SignalR消息大小限制，同时用流式互操作避免Base64的性能开销：

1. 修改Program.cs/Startup.cs的SignalR配置，调大消息上限：

services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        // 调整为你需要的最大文件大小，示例为200MB
        options.MaximumReceiveMessageSize = 200 * 1024 * 1024;
        options.MaximumParallelInvocationsPerClient = 10;
    });

2. 使用.NET 5+支持的流式JS互操作，直接传Stream给JS，不需要转Base64：

// 不需要把整个文件读入内存转字节数组，直接传递流对象
await js.InvokeVoidAsync("streamDownload", fileName, fsrResponse.Data.FileStream);

3. JS端接收流处理下载：

async function streamDownload(filename, streamRef) {
    const arrayBuffer = await streamRef.arrayBuffer();
    const blob = new Blob([arrayBuffer], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
}

注意事项 #

• 方案1无文件大小限制，也不会占用SignalR的传输资源，生产环境优先使用
• 方案2如果文件过大，依然会占用大量服务器内存，仅适合小范围内部使用的场景

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