如何使用JavaScript获取Web服务器指定目录下的网站文件名

为什么require('fs')无法实现需求 #

fs是Node.js环境专属的服务端文件操作模块，仅能在服务器端的Node.js运行时中调用，浏览器端的前端JS受安全沙箱限制，没有权限直接读取服务器的文件系统结构，必须通过服务端提供的能力间接获取文件列表。

方案1：Node.js服务端写接口返回文件列表（最推荐） #

如果你的Web服务器是基于Node.js搭建的，直接开发一个HTTP接口扫描指定目录、返回PDF文件名即可，该方案生产环境稳定性和安全性可控，不依赖额外服务器配置。

服务端示例代码（Express框架为例） #

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

// 按需配置跨域规则，仅前端和接口域名不同时需要
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

// PDF列表查询接口
app.get('/get-pdf-list', async (req, res) => {
  try {
    // 替换为你需要扫描的服务器本地目录实际路径
    const targetDir = path.join(__dirname, './public/pdf-files');
    const allFiles = await fs.readdir(targetDir);
    // 过滤出PDF格式文件
    const pdfFiles = allFiles.filter(file => path.extname(file).toLowerCase() === '.pdf');
    res.json({ code: 200, data: pdfFiles });
  } catch (err) {
    res.json({ code: 500, msg: '目录读取失败' });
  }
});

app.listen(3000, () => console.log('服务已启动，端口3000'));

前端调用代码 #

fetch('http://你的服务器实际地址:3000/get-pdf-list')
  .then(res => res.json())
  .then(result => {
    if (result.code === 200) {
      console.log('PDF文件列表：', result.data);
      // 此处添加你的业务处理逻辑
    }
  });

方案2：利用服务器目录索引功能（无需编写服务端代码） #

如果你的Web服务器（Nginx/Apache等）已经开启了目标目录的索引展示功能，可以直接用前端JS请求目录路径、解析返回的HTML提取PDF文件名。

前端示例代码 #

async function getPdfList(dirUrl) {
  const res = await fetch(dirUrl);
  const htmlContent = await res.text();
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlContent, 'text/html');
  // 提取所有链接并过滤出PDF文件
  const pdfList = Array.from(doc.querySelectorAll('a'))
    .map(a => a.getAttribute('href'))
    .filter(href => href.toLowerCase().endsWith('.pdf'));
  return pdfList;
}

// 调用时替换为服务器开放索引的目录实际地址
getPdfList('https://你的服务器实际地址/pdf-files/')
  .then(list => console.log('PDF文件列表：', list));

注意：该方案仅适用于服务器开启了目标目录索引的场景，如果服务器关闭了索引功能会返回403错误，无法正常使用。

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