从gridfs-stream获取PDF时无法在浏览器渲染 仅弹出下载选项

你的基础逻辑没有问题，PDF无法预览通常是几个细节遗漏导致的：

• 缺少Content-Length响应头：浏览器渲染PDF时需要明确知晓文件总大小，否则会将未知长度的二进制内容默认判定为待下载文件
• 未捕获流读取异常：如果GridFS文件读取过程出错，返回的不完整二进制内容会被浏览器识别为无效PDF，触发下载逻辑
• 未添加X-Content-Type-Options头：部分浏览器会擅自嗅探文件类型，覆盖你设置的application/pdf响应头，导致识别异常

修改后的代码 #

view: async (req, res) => {
  try {
    const id = mongoose.Types.ObjectId(req.params.pid)
    const project = await Project.findById(id)
    const upid = mongoose.Types.ObjectId(project.uploadedGridFileId)
    
    const uploads = mongoose.createConnection("mongodb://localhost:27017/techv-uploads", { 
      useNewUrlParser: true, 
      useUnifiedTopology: true 
    })

    uploads.once('open', function () {
      const gfs = gridfsStream(uploads.db, mongoose.mongo)
      // 先查询文件元数据获取文件长度
      gfs.files.findOne({ _id: upid, root: "projectPdfs" }, (err, file) => {
        if (err || !file) {
          return res.status(404).send('文件不存在')
        }
        // 补全所有必要响应头
        res.set({
          "Content-Type": "application/pdf",
          "Content-Disposition": "inline",
          "Content-Length": file.length,
          "X-Content-Type-Options": "nosniff"
        })
        const readstream = gfs.createReadStream({
          _id: upid,
          root: "projectPdfs"
        })
        // 捕获流读取错误
        readstream.on('error', () => {
          res.status(500).send('文件读取失败')
        })
        readstream.pipe(res)
      })
    })
  } catch (err) {
    res.status(500).send('服务异常')
  }
}

额外排查点 #

• 确认上传PDF到GridFS时，设置的contentType为application/pdf，而非默认的application/octet-stream
• 测试时关闭浏览器的「PDF文件默认下载」开关，部分浏览器开启该配置后所有PDF都会直接下载不预览
• 如果是前后端分离架构，需要在跨域允许头中添加Content-Disposition，否则浏览器会忽略该响应头，默认走下载逻辑

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