如何提取文件名片段生成新窗口链接并构建文件目录表格

我来帮你梳理这个功能的实现方案，从文件获取到表格生成一步步拆解：

一、先确认文件获取的正确方式 #

1. Node.js后端场景 #

如果是后端服务端处理，可以用Node.js的fs模块遍历目标目录，筛选出PDF和图片文件：

const fs = require('fs').promises;
const path = require('path');

async function fetchTargetFiles(dirPath) {
  try {
    const allFiles = await fs.readdir(dirPath);
    // 筛选支持的文件类型：PDF + 常见图片格式
    return allFiles.filter(file => {
      const ext = path.extname(file).toLowerCase();
      return ['.pdf', '.jpg', '.jpeg', '.png', '.gif'].includes(ext);
    });
  } catch (err) {
    console.error('读取目录出错:', err);
    return [];
  }
}

2. 前端浏览器场景 #

浏览器受安全限制，不能直接读取本地目录，但可以通过让用户手动选择目录来获取文件：

<input type="file" id="dirSelector" webkitdirectory directory>
<script>
document.getElementById('dirSelector').addEventListener('change', (e) => {
  // 把FileList转为数组，方便后续处理
  const fileList = Array.from(e.target.files);
  // 筛选目标文件
  const targetFiles = fileList.filter(file => {
    const fileExt = file.name.split('.').pop().toLowerCase();
    return ['pdf', 'jpg', 'jpeg', 'png', 'gif'].includes(fileExt);
  });
  // 拿到文件列表后，调用生成表格的函数
  buildFileTable(targetFiles);
});
</script>

二、提取文件名片段并生成带按钮式链接的表格 #

假设你的文件名格式固定为number_nam_company_color.pdf，我们可以通过字符串分割提取字段，然后生成表格，用按钮触发新窗口打开文件：

function buildFileTable(files) {
  const tableContainer = document.createElement('div');
  tableContainer.innerHTML = `
    <table border="1" cellpadding="8" cellspacing="0">
      <thead>
        <tr>
          <th>序号</th>
          <th>编号</th>
          <th>名称</th>
          <th>公司</th>
          <th>颜色</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        ${files.map((file, idx) => {
          // 去掉文件扩展名，分割字段
          const nameWithoutExt = file.name.split('.')[0];
          const [number, nam, company, color] = nameWithoutExt.split('_');
          
          // 生成可访问的文件URL：前端用临时URL，后端用静态文件路径
          const fileUrl = URL.createObjectURL(file); // 前端场景
          // 后端场景替换为：const fileUrl = `/static/files/${encodeURIComponent(file.name)}`;

          return `
            <tr>
              <td>${idx + 1}</td>
              <td>${number || '无'}</td>
              <td>${nam || '无'}</td>
              <td>${company || '无'}</td>
              <td>${color || '无'}</td>
              <td>
                <button onclick="window.open('${fileUrl}', '_blank')">打开文件</button>
              </td>
            </tr>
          `;
        }).join('')}
      </tbody>
    </table>
  `;
  // 把表格添加到页面中
  document.body.appendChild(tableContainer);
}

三、几个关键注意点 #

• 前端安全限制：浏览器无法主动读取本地目录，必须依赖用户手动选择目录上传，或者由后端提供文件列表接口。
• 文件URL有效期：前端用URL.createObjectURL生成的临时链接，在页面关闭后会失效，如果需要长期访问，建议上传到服务器。
• 异常处理：如果文件名格式不符合预期（比如下划线缺失），要添加默认值（示例中的|| '无'）避免页面报错。

内容的提问来源于stack exchange，提问作者IDidn'tFindItYET