Node.js网页实现按URL参数读取指定目录PDF列表并打开功能求助

作为Node.js新手，咱们一步步来搭建这个功能，用Express框架（新手友好，比原生HTTP模块简单很多），下面是完整的步骤和代码：

1. 初始化项目并安装依赖 #

打开命令提示符（CMD），进入你要创建项目的文件夹，依次执行以下命令：

# 初始化npm项目（一路回车默认配置即可）
npm init -y

# 安装Express框架，用来处理HTTP请求和路由
npm install express

2. 编写服务器核心代码（app.js） #

创建一个名为app.js的文件，把下面的代码复制进去，每一行都加了注释帮你理解：

// 导入需要的核心模块
const express = require('express');
const fs = require('fs').promises; // 用异步文件操作API，避免阻塞服务器
const path = require('path'); // 处理文件路径，自动兼容Windows的\和Linux的/

// 创建Express应用实例
const app = express();
const port = 3000;

// 设置静态文件目录：让浏览器能直接访问files文件夹下的文件
// 这样点击PDF链接时，服务器能正确返回文件内容
app.use('/files', express.static(path.join(__dirname, 'files')));

// 处理根路径的GET请求（对应你访问的http://127.0.0.1:3000/?id=1001）
app.get('/', async (req, res) => {
  try {
    // 从URL的query参数里获取id值
    const userId = req.query.id;
    
    // 如果URL里没带id参数，返回提示信息
    if (!userId) {
      return res.send('<h1>请在URL中添加id参数，例如：http://127.0.0.1:3000/?id=1001</h1>');
    }

    // 拼接目标目录路径：当前项目下的files/{id}文件夹
    // path.join会自动处理Windows的路径分隔符，避免手动拼写出错
    const targetDir = path.join(__dirname, 'files', userId);

    // 读取目标目录下的所有文件
    const files = await fs.readdir(targetDir);

    // 筛选出后缀为.pdf的文件（不区分大小写，比如.PDF也能匹配）
    const pdfFiles = files.filter(file => {
      return file.toLowerCase().endsWith('.pdf');
    });

    // 如果目录里没有PDF文件，返回提示
    if (pdfFiles.length === 0) {
      return res.send(`<h1>用户${userId}的目录下没有PDF文件</h1>`);
    }

    // 生成HTML页面，把PDF文件做成可点击的链接
    let htmlContent = `<h1>用户${userId}的PDF文件列表</h1><ul>`;
    pdfFiles.forEach(file => {
      // 链接地址对应静态文件路径，点击后在新窗口打开PDF
      const fileUrl = `/files/${userId}/${file}`;
      htmlContent += `<li><a href="${fileUrl}" target="_blank">${file}</a></li>`;
    });
    htmlContent += '</ul>';

    // 把生成的HTML发送给浏览器
    res.send(htmlContent);

  } catch (err) {
    // 处理错误情况，比如目录不存在
    if (err.code === 'ENOENT') {
      res.status(404).send(`<h1>不存在用户${req.query.id}的目录，请检查id是否正确</h1>`);
    } else {
      // 其他未知错误，返回具体提示
      res.status(500).send(`<h1>服务器出错：${err.message}</h1>`);
    }
  }
});

// 启动服务器，监听3000端口
app.listen(port, () => {
  console.log(`服务器已启动，访问地址：http://127.0.0.1:${port}`);
});

3. 准备文件目录结构 #

在你的项目文件夹下创建files目录，然后在files里创建对应id的子目录（比如1001），并放入测试用的PDF文件：

你的项目文件夹/
├── app.js
├── node_modules/
├── package.json
└── files/
    └── 1001/
        ├── 项目报告.pdf
        └── 说明文档.pdf

4. 启动服务器并测试 #

回到CMD，执行以下命令启动服务器：

node app.js

然后打开浏览器访问http://127.0.0.1:3000/?id=1001，就能看到PDF文件列表，点击链接就能在新窗口打开对应的PDF啦！

关键细节说明 #

• express.static：设置静态目录后，服务器会自动处理PDF文件的访问请求，不用额外写路由。
• path.join：Windows下路径用\，Linux用/，用这个方法拼接路径能自动适配，避免手动拼写出错。
• 异步操作：用fs.promises的readdir方法，不会阻塞服务器，处理多个请求时更流畅。
• 错误处理：捕获了目录不存在、无PDF文件等常见情况，给用户清晰的提示信息。

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