BitGarden

Recent Notes

See 504 more →

浏览器文件下载

share3 min read

询问 AI

Content-Disposition ：

Content-Disposition: attachment; filename="example.xlsx"

  • attachment 指示浏览器下载而不是显示
  • filename 指定下载文件名

Content-Type ：

Content-Type: application/vnd.ms-excel // .xls // 或 Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet // .xlsx

测试

const express = require('express');
const path = require('path');
const fs = require('fs');
 
// 创建Express应用
const app = express();
const port = 3000;
 
// 路由：获取test目录下的文件
app.get('/file/:filename', (req, res) => {
  const filename = req.params.filename;
  const filePath = path.join(__dirname, 'test', filename);
  // 检查文件是否存在
  fs.access(filePath, fs.constants.F_OK, (err) => {
    if (err) {
      return res.status(404).send('文件不存在');
    }
    // 发送文件
    res.sendFile(filePath);
  });
});
 
// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

通过这个来进行测试，发现直接的 get 请求 在对以下文件类型也会自动触发

/Users/yes365/Temp/test01/test/doc.docx /Users/yes365/Temp/test01/test/js.js /Users/yes365/Temp/test01/test/patch.patch /Users/yes365/Temp/test01/test/test1.xlsx

但是 text/plain /Users/yes365/Temp/test01/test/txt1.txt 不会触发。

根据 AI 的回答总结如下 是的，即使不配置 Content-Disposition，浏览器也会根据以下机制自动判断是打开还是下载：

  1. 主要判断依据：

    • Content-Type（MIME 类型）
    • 文件扩展名
    • 浏览器对该类型文件的默认处理能力

  2. 自动下载的情况：

    • Content-Type 为 application/octet-stream
    • 特定的 MIME 类型（如 application/zip、application/x-rar-compressed）
    • 可执行文件扩展名（.exe、.msi 等）
    • 浏览器无法处理的文件类型

  3. 直接打开的情况：

    • 图片类型（image/*）
    • 文本类型（text/*）
    • PDF（application/pdf，前提是浏览器安装了相应插件）
    • 音视频（audio/、video/，支持 HTML5 播放的格式）

需要注意的是，虽然不配置 Content-Disposition 也能触发相应行为，但配置 Content-Disposition 可以：

  • 强制指定浏览器的行为（attachment 强制下载，inline 强制打开）
  • 覆盖浏览器的默认行为
  • 提供更好的用户体验（如指定下载文件名）

Graph View