在.NET Core 2 React SPA中使用C# FileStreamResult时Blob编码错误

兄弟，我之前也碰到过几乎一模一样的问题——在.NET Core的React项目里拉取PDF流，用msSaveBlob或者createObjectURL都乱码，折腾了好几天才搞定！咱们一步步来排查解决：

先确认后端的响应配置没出错 #

首先得确保后端返回FileStreamResult时，给对了头部信息，别让二进制数据被额外编码干扰：

public IActionResult GetPdfDocument()
{
    var pdfFilePath = Path.Combine(Environment.ContentRootPath, "Documents", "sample.pdf");
    var fileStream = new FileStream(pdfFilePath, FileMode.Open, FileAccess.Read);
    
    // 关键：指定正确的Content-Type，并且不要加多余的编码头
    return new FileStreamResult(fileStream, "application/pdf")
    {
        FileDownloadName = "my-document.pdf"
    };
}

另外还要注意，如果你的项目开了响应压缩，一定要把application/pdf排除在外——压缩二进制文件很容易导致编码乱码：

// 在Startup.cs的ConfigureServices里配置
services.AddResponseCompression(options =>
{
    options.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/json", "text/plain", "text/html" });
    // 故意不包含application/pdf，避免压缩破坏二进制结构
});

前端请求必须明确要二进制数据 #

这是大部分人踩坑的地方：默认情况下，前端请求会把响应当成文本解析，直接转Blob就会乱码。必须告诉请求库要接收二进制格式！

用Fetch API的正确写法 #

const downloadPdf = async () => {
    try {
        const response = await fetch('/api/Documents/GetPdfDocument', {
            method: 'GET',
            headers: {
                'Accept': 'application/pdf'
            },
            responseType: 'blob' // 核心配置，告诉浏览器这是二进制Blob
        });

        if (!response.ok) {
            throw new Error(`请求失败：${response.status}`);
        }

        const pdfBlob = await response.blob();
        // 处理浏览器兼容下载
        if (window.navigator.msSaveBlob) {
            // IE/Edge专属方法
            window.navigator.msSaveBlob(pdfBlob, "my-document.pdf");
        } else {
            const blobUrl = window.URL.createObjectURL(pdfBlob);
            const link = document.createElement('a');
            link.href = blobUrl;
            link.download = "my-document.pdf";
            document.body.appendChild(link);
            link.click();
            // 清理URL对象，避免内存泄漏
            window.URL.revokeObjectURL(blobUrl);
            document.body.removeChild(link);
        }
    } catch (err) {
        console.error('PDF下载出错:', err);
    }
};

用Axios的正确写法 #

如果你的项目用Axios，同样要设置responseType: 'blob'：

import axios from 'axios';

const downloadPdfWithAxios = async () => {
    try {
        const response = await axios.get('/api/Documents/GetPdfDocument', {
            headers: { 'Accept': 'application/pdf' },
            responseType: 'blob' // 必须加这个！
        });

        const pdfBlob = new Blob([response.data], { type: 'application/pdf' });
        // 后续下载逻辑和上面Fetch的兼容代码一致
        if (window.navigator.msSaveBlob) {
            window.navigator.msSaveBlob(pdfBlob, "my-document.pdf");
        } else {
            const blobUrl = window.URL.createObjectURL(pdfBlob);
            const link = document.createElement('a');
            link.href = blobUrl;
            link.download = "my-document.pdf";
            document.body.appendChild(link);
            link.click();
            window.URL.revokeObjectURL(blobUrl);
            document.body.removeChild(link);
        }
    } catch (err) {
        console.error('下载失败:', err);
    }
};

避开这些常见坑 #

• 绝对不要手动编码/解码Blob：别尝试用btoa、TextDecoder之类的工具处理返回的二进制数据，这会直接破坏PDF的字节结构，必乱码！
• 检查流的Position：后端返回FileStream前，确保流的位置在起始点，比如fileStream.Seek(0, SeekOrigin.Begin);，不然可能返回空流或者半截数据。
• 排查CORS配置：如果后端CORS设置了AllowHeaders或者ExposeHeaders，确保没限制必要的响应头（比如Content-Disposition），否则前端可能拿不到正确的文件名。

如果按上面的步骤来，基本就能解决Blob编码错误的问题了。

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