HTTP之content-disposition

像素之间2025-10-15 4:00

Content-Disposition 是 HTTP 响应头 的一个字段，用来告诉浏览器："这个响应体（body）是应该直接展示在页面上，还是当成文件下载？如果下载，文件名应该叫什么？"

🔍 一句话解释

Content-Disposition 是 服务器给浏览器的"下载提示" ，告诉浏览器 "别打开，直接保存，文件名是 xxx"。

📌 常见格式

1. 在线打开（默认值）

http 复制代码

Content-Disposition: inline

浏览器会 直接打开 文件（比如图片、PDF 直接在标签页显示）。

2. 下载文件

http 复制代码

Content-Disposition: attachment

浏览器会 弹出下载框，不打开文件。

3. 下载并指定文件名

http 复制代码

Content-Disposition: attachment; filename="员工模板.xlsx"

浏览器会 下载文件，并默认保存为"员工模板.xlsx"。

⚠️ 中文文件名兼容性

中文文件名 必须编码，否则不同浏览器会乱码。

✅ 正确写法（UTF-8 编码）

http 复制代码

Content-Disposition: attachment; filename*=UTF-8''%E5%91%98%E5%B7%A5%E6%A8%A1%E6%9D%BF.xlsx

filename*=UTF-8'' 是 RFC 5987 标准，支持中文。
%E5%91%98... 是"员工模板.xlsx"的 URL 编码。

🧪 前端如何解析（对应你代码）

js 复制代码

const contentDisposition = res.headers['content-disposition']
// 例子：attachment; filename*=UTF-8''%E5%91%98%E5%B7%A5%E6%A8%A1%E6%9D%BF.xlsx

const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)
if (filenameMatch && filenameMatch[1]) {
  const filename = decodeURIComponent(filenameMatch[1].replace(/['"]/g, ''))
  // 结果：员工模板.xlsx
}

✅ 总结一句话

场景	Content-Disposition 值示例	浏览器行为
在线打开	`inline`	直接打开文件
下载文件	`attachment`	弹出下载框
下载+文件名	`attachment; filename*=UTF-8''%E5%91%98%E5%B7%A5.xlsx`	下载并保存为中文名