如何用客户端JavaScript解析含UTF-8字符的Content-Disposition头

我完全懂你遇到的问题——在Node.js里用content-disposition包能轻松搞定带非ASCII文件名的Content-Disposition头解析，但放到客户端浏览器里就报错，大概率是因为这个包依赖了Node.js专属的核心API（比如buffer、path模块），浏览器环境里没有这些东西。

下面给你几个实用的解决办法：

1. 手动实现符合RFC 5987标准的解析函数 #

既然现成的包用不了，我们可以自己写一个轻量的解析逻辑，专门处理filename*这种扩展格式：

function parseContentDisposition(header) {
  const disposition = {
    type: '',
    filename: ''
  };

  // 拆分头部的各个部分，去掉多余空格
  const segments = header.split(';').map(s => s.trim());
  disposition.type = segments[0];

  // 遍历所有参数
  for (const segment of segments.slice(1)) {
    const [key, rawValue] = segment.split('=').map(item => item.trim());
    if (!key || !rawValue) continue;

    // 处理普通filename字段（ASCII场景）
    if (key === 'filename') {
      // 去掉可能包裹的双引号
      disposition.filename = rawValue.replace(/^"|"$/g, '');
    }
    // 处理带编码的filename*字段（非ASCII场景）
    else if (key === 'filename*') {
      // 拆分编码格式和编码后的字符串，格式为「编码''编码内容」
      const [charset, encodedStr] = rawValue.split("''");
      if (charset && encodedStr) {
        // 目前绝大多数场景都是UTF-8编码，直接用decodeURIComponent解码
        if (charset.toLowerCase() === 'utf-8') {
          disposition.filename = decodeURIComponent(encodedStr);
        }
        // 如果遇到其他编码，可以用TextDecoder处理（比如ISO-8859-1）
        else {
          try {
            const decoder = new TextDecoder(charset);
            const bytes = Uint8Array.from(atob(encodedStr), c => c.charCodeAt(0));
            disposition.filename = decoder.decode(bytes);
          } catch (e) {
            // 解码失败 fallback 到普通filename
            console.warn(`Failed to decode filename with charset ${charset}`, e);
          }
        }
      }
    }
  }

  // 优先使用filename*的值（它是标准的非ASCII文件名格式）
  return disposition;
}

// 测试你的示例头部
const testHeader = 'Content-Disposition:attachment; filename="john?doe.jpg"; filename*=UTF-8''john%E2%80%93doe.jpg';
const result = parseContentDisposition(testHeader);
console.log(result.filename); // 输出：john–doe.jpg

这个函数的逻辑很清晰：

• 先拆分头部的类型和参数
• 分别处理普通filename和带编码的filename*字段
• 优先采用filename*的值，因为它是RFC 5987定义的标准非ASCII文件名格式
• 对非UTF-8编码的场景做了容错处理，用TextDecoder来兼容

2. 改造原content-disposition包适配浏览器 #

如果你特别想用原包的功能，可以把它的源码拉下来，替换掉Node.js专属的API：

• 把Buffer相关的操作换成浏览器兼容的Uint8Array或decodeURIComponent
• 去掉对path模块的依赖（比如文件名的合法性校验可以简化）
• 打包成纯浏览器可用的UMD格式（用webpack或rollup）

这种方式适合需要完整解析逻辑（比如处理各种异常格式）的场景，但需要一点源码改造的功夫。

3. 选择轻量的浏览器友好替代库 #

有些社区维护的轻量库专门针对浏览器环境，不依赖Node.js核心模块，比如纯JS实现、无依赖的解析库，你可以直接在客户端引入使用。

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