React中如何从响应的Content-Disposition获取文件名？

服务器返回的filename*=utf-8'ru-ru'%xxxx格式符合RFC 5987标准的编码规则，结构为编码'语言'URL编码后的文件名。要提取原始文件名，需按以下步骤处理：

修改后的代码实现 #

public async getSingleWellCostDocumentData(
    vid: string,
): Promise<{ fileName: string; blob: Blob }> {
    const token = await this.identity!.getToken();

    try {
        const response = await fetch(
            `${this.baseApiUrl}/${this.projectId}/download_file?type=${vid}`,
            {
                method: 'GET',
                mode: 'cors',
                headers: {
                    Authorization: `Bearer ${token}`,
                },
            },
        );

        if (response.ok) {
            const blob = await response.blob();
            const contentType = response.headers.get('Content-Type')!;
            const disposition = response.headers.get('content-disposition')!;

            // 提取filename*对应的编码片段，去除后续多余参数
            const filenameEncodedSegment = disposition.split('filename*=')[1].split(';')[0].trim();
            // 拆分编码规则、语言、编码文件名，取第三段的编码内容
            const encodedFilename = filenameEncodedSegment.split("'")[2];
            // URL解码得到原始文件名
            const fileName = decodeURIComponent(encodedFilename);

            console.log('fileName', fileName);

            return {
                fileName,
                blob: new Blob([blob], {
                    type: contentType,
                }),
            };
        }
        throw new Error('请求失败');
    } catch (e) {
        throw new Error('文件下载出错');
    }
}

核心解析逻辑说明 #

1. 剥离冗余内容：通过split('filename*=')[1]提取编码片段，再用split(';')[0].trim()移除后续无关参数和空格
2. 拆分编码结构：用split("'")拆分后，数组第三个元素（索引2）即为纯URL编码的文件名部分
3. 解码还原：使用decodeURIComponent()将%XX格式的俄文字符转换为原始Unicode文本

验证结果 #

针对你提供的编码字符串，解码后会得到正确的俄文文件名：Результаты расчета стоимости оборудования единственной скважины, с разжигровкой.xlsx

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