如何让Node.js+React应用在浏览器中打开PDF、DOC等文档？

我需要给用户展示可用文档列表，支持用户选择在浏览器中查看或下载到本地。目前下载功能已经实现，但找不到正确的方式让Node.js后端配合React前端，在用户浏览器中打开文档查看。

当前React前端处理逻辑的代码如下：

const fetchFile = async (operation, path, fileName) => {
    Axios.get(
        `http://localhost:8080/api${path}`,
        { responseType: 'blob' })
    .then(res => {
            return res.data
        })
    .then(blob => {
            let url
            const link = document.createElement('a')

            if (operation === "1") {
                url = URL.createObjectURL(blob)
                window.open(url)
            }
            else {
                url = window.URL.createObjectURL(blob)
                link.href = url
                link.download = fileName
            }

            document.body.appendChild(link)
            link.click()
            link.remove()
            URL.revokeObjectURL(url)
        })
    .catch(err => console.log(err))
}

该函数处理API请求：当operation为"1"时，应该在浏览器打开文档；否则执行下载操作。

Node.js后端尝试用res.sendFile实现打开文档的逻辑：

function openDocument(res, path) {
  res.sendFile(path, {root: __dirname});
}

但现在出现ENOENT错误，看起来程序尝试以index.html格式解析文件、扩展文件名，导致找不到文件路径。

想请教：如何让Web应用打开后端发送的文档在浏览器中查看？这个需求是否可行？

这个需求完全可行，问题出在后端路径处理和前端打开逻辑的细节上，调整如下：

一、后端修复路径与响应头问题 #

ENOENT错误本质是找不到文件，同时需要明确文件的MIME类型，让浏览器知道该如何解析文件：

const path = require('path');
const mime = require('mime-types'); // 先安装：npm install mime-types

function openDocument(res, filePath) {
  // 拼接绝对路径，避免相对路径混乱
  const absolutePath = path.resolve(__dirname, filePath);
  
  // 自动识别文件MIME类型，比如pdf对应application/pdf，图片对应image/jpeg等
  const mimeType = mime.lookup(absolutePath);
  
  // 设置响应头，告诉浏览器这是可预览的文件
  res.setHeader('Content-Type', mimeType);
  // 强制浏览器以内联方式打开，而非默认下载（部分浏览器生效）
  res.setHeader('Content-Disposition', 'inline');

  try {
    res.sendFile(absolutePath);
  } catch (err) {
    console.error('文件读取失败:', err);
    res.status(404).send('文件不存在');
  }
}

注意：

• 确保传入的filePath是相对于__dirname的正确路径，比如文档存在./documents/test.pdf，则filePath应为'documents/test.pdf'
• 依赖mime-types包自动识别类型，避免手动设置出错

二、前端优化打开逻辑 #

当前前端的window.open可能被浏览器拦截，同时不需要在预览场景下执行多余的<a>标签点击操作，调整后代码：

const fetchFile = async (operation, path, fileName) => {
    try {
        const res = await Axios.get(
            `http://localhost:8080/api${path}`,
            { responseType: 'blob' }
        );
        const blob = res.data;
        const url = URL.createObjectURL(blob);

        if (operation === "1") {
            // 用a标签+_blank打开，规避浏览器拦截
            const link = document.createElement('a');
            link.href = url;
            link.target = '_blank';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        } else {
            const link = document.createElement('a');
            link.href = url;
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        URL.revokeObjectURL(url);
    } catch (err) {
        console.error('文件请求失败:', err);
    }
}

三、关键注意事项 #

• 浏览器仅能预览自身支持的文件类型（如PDF、图片、文本文件等），对于Excel、Word这类文件，浏览器可能直接触发下载，属于浏览器默认行为，无法强制预览
• 后端必须正确设置Content-Type和Content-Disposition: inline，否则浏览器会默认执行下载
• 确保Node.js进程拥有目标文件的读取权限，避免因权限问题导致文件无法访问

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