Express.js中无法在页面展示静态PDF文件的问题求助

核心问题分析 #

你之前的做法存在两个关键问题：

1. 直接用express.static暴露文件夹会导致所有文件（包括PDF）公开可访问，完全不符合你限制访问的需求；
2. PDF无法预览大概率是因为express.static返回的Content-Type不正确，浏览器无法识别渲染，而图片的MIME类型能被自动识别所以正常加载。

正确实现方式：创建权限验证后的文件路由 #

不要直接暴露整个uploads文件夹，而是创建一个单独的路由，先做权限校验，再返回文件，同时手动设置PDF的MIME类型。

1. 基础配置

确保uploads文件夹放在项目根目录（而非public目录下），引入必要的模块：

const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();

// 你的authUsers中间件（确保它能正确验证用户身份，比如检查session/JWT）
const authUsers = (req, res, next) => {
  // 示例：检查用户是否登录
  if (!req.session.user) {
    return res.status(401).send('未授权访问');
  }
  next();
};

2. 编写受保护的文件路由

// 处理PDF等受保护文件的请求
app.get('/protected-files/:filename', authUsers, (req, res) => {
  const filename = req.params.filename;
  // 拼接绝对文件路径
  const filePath = path.resolve(__dirname, 'uploads', filename);

  // 先检查文件是否存在
  fs.access(filePath, fs.constants.F_OK, (err) => {
    if (err) {
      return res.status(404).send('文件不存在');
    }

    // 手动设置PDF的Content-Type，确保浏览器能正确渲染
    const fileExt = path.extname(filename).toLowerCase();
    if (fileExt === '.pdf') {
      res.setHeader('Content-Type', 'application/pdf');
    }
    // 如需支持其他文件类型，可在此添加MIME类型判断

    // 发送文件到前端
    res.sendFile(filePath);
  });
});

3. 前端页面预览PDF

从MongoDB获取文件的文件名后，动态生成访问路径：

<!-- 用object标签预览 -->
<object 
  data="/protected-files/<%= pdfFile.filename %>" 
  type="application/pdf" 
  width="100%" 
  height="600px"
>
  你的浏览器不支持PDF预览，请<a href="/protected-files/<%= pdfFile.filename %>">下载文件</a>
</object>

<!-- 或者用iframe -->
<iframe 
  src="/protected-files/<%= pdfFile.filename %>" 
  width="100%" 
  height="600px"
>
  无法预览PDF，请点击<a href="/protected-files/<%= pdfFile.filename %>">下载</a>
</iframe>

为什么之前的尝试失败？ #

• 直接用express.static暴露uploads：本质是把整个文件夹变成公开静态资源，任何人都能通过URL访问，完全不符合权限控制需求；
• app.use(authUsers, express.static('public/uploads'))：如果uploads不在public目录下，路径本身就错误；另外即便路径正确，静态资源的访问规则会导致权限校验不够灵活，且无法手动修正MIME类型；
• PDF无法预览：express.static可能给PDF返回application/octet-stream（二进制流）类型，浏览器会默认下载而非预览，手动设置application/pdf就能解决这个问题。

额外优化建议 #

• 添加文件类型白名单：在路由里只允许访问PDF或你需要的文件类型，防止用户通过该路由访问敏感文件；
• 缓存优化：可以给静态文件添加缓存头，提升重复访问的性能；
• 错误处理：完善文件不存在、权限不足等场景的错误提示，提升用户体验。

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