如何用JavaScript实现本地动态匹配带版本号的零件图纸PDF链接？

可以实现，但得根据页面的运行场景选择方案——浏览器出于安全限制，纯file://协议打开本地页面时无法自动扫描本地目录，所以需要分两种情况处理：

方案一：纯本地file://模式（无需服务器） #

这种情况下你需要提前把所有PDF的文件名维护在一个数组里，然后通过JS匹配零件号并筛选出对应PDF（优先取最新版本）。

完整代码示例 #

// 零件号数据（兼容你原有的数组格式，也可改用更现代的写法）
const regrf = [
  ["1234", "Product1"],
  ["5678", "Product2"]
];

// 提前维护所有PDF文件名（更新PDF后仅需修改此数组，无需逐个改链接）
const pdfFiles = [
  "1234 Rev.1.pdf",
  "1234 Rev.2.pdf",
  "5678.pdf",
  "5678 Rev.1.pdf"
];

// 匹配零件号对应的PDF，优先取版本号最高的
function getMatchingPdf(partNumber) {
  // 筛选以零件号开头的PDF
  const matches = pdfFiles.filter(file => file.startsWith(partNumber));
  if (matches.length === 0) return null;

  // 按版本号降序排序，取最新版本
  return matches.sort((a, b) => {
    // 提取版本号，无版本号的视为0
    const extractRev = (filename) => {
      const revMatch = filename.match(/Rev\.(\d+)/);
      return revMatch ? parseInt(revMatch[1]) : 0;
    };
    return extractRev(b) - extractRev(a);
  })[0];
}

// 生成图纸链接
function generateDrawingLinks() {
  const container = document.getElementById('drawing-links');
  regrf.forEach(([partNumber, productName]) => {
    const pdfPath = getMatchingPdf(partNumber);
    
    if (!pdfPath) {
      container.innerHTML += `<div>${productName} (无对应图纸)</div>`;
      return;
    }

    // 创建链接元素
    const link = document.createElement('a');
    link.href = pdfPath;
    link.target = '_blank'; // 新窗口打开PDF

    // 添加图纸图标
    const img = document.createElement('img');
    img.src = 'images/drawing.png';
    img.alt = `${productName} 图纸`;
    link.appendChild(img);

    // 添加零件号和产品名文字（可选）
    const label = document.createElement('span');
    label.textContent = ` ${partNumber} - ${productName}`;
    link.appendChild(label);

    container.appendChild(link);
    container.appendChild(document.createElement('br'));
  });
}

// 页面加载完成后生成链接
window.addEventListener('load', generateDrawingLinks);

优化小技巧 #

如果PDF文件较多，手动维护pdfFiles数组麻烦，可以写个简单的Python脚本自动扫描目录下的PDF并生成这个数组，每次更新PDF后运行脚本即可：

# 生成pdfFiles数组的Python脚本
import os
import json

pdf_files = [f for f in os.listdir('.') if f.endswith('.pdf')]
print(f"const pdfFiles = {json.dumps(pdf_files)};")

方案二：本地服务器模式（自动扫描PDF） #

如果能把页面放在本地服务器上运行（比如用Node.js的http-server、Python的SimpleHTTPServer），就可以通过JS自动获取目录下的PDF文件，完全不需要手动维护文件名数组。

核心代码示例 #

// 复用方案一中的regrf数组
const regrf = [
  ["1234", "Product1"],
  ["5678", "Product2"]
];

// 匹配零件号对应的PDF，优先取版本号最高的（新增pdfFiles参数）
function getMatchingPdf(partNumber, pdfFiles) {
  const matches = pdfFiles.filter(file => file.startsWith(partNumber));
  if (matches.length === 0) return null;

  return matches.sort((a, b) => {
    const extractRev = (filename) => {
      const revMatch = filename.match(/Rev\.(\d+)/);
      return revMatch ? parseInt(revMatch[1]) : 0;
    };
    return extractRev(b) - extractRev(a);
  })[0];
}

// 从服务器获取目录下的PDF文件列表
async function fetchPdfFiles() {
  try {
    const response = await fetch('.');
    const dirHtml = await response.text();
    // 解析服务器返回的目录页面，提取所有PDF文件名
    const pdfMatches = dirHtml.match(/href="([^"]+\.pdf)"/g) || [];
    return pdfMatches.map(match => match.replace('href="', '').replace('"', ''));
  } catch (err) {
    console.error('获取PDF列表失败:', err);
    return [];
  }
}

// 生成链接的函数修改为异步
async function generateDrawingLinks() {
  const pdfFiles = await fetchPdfFiles();
  const container = document.getElementById('drawing-links');
  
  regrf.forEach(([partNumber, productName]) => {
    const pdfPath = getMatchingPdf(partNumber, pdfFiles);
    if (!pdfPath) {
      container.innerHTML += `<div>${productName} (无对应图纸)</div>`;
      return;
    }
    // 创建链接元素的逻辑和方案一一致
    const link = document.createElement('a');
    link.href = pdfPath;
    link.target = '_blank';
    const img = document.createElement('img');
    img.src = 'images/drawing.png';
    img.alt = `${productName} 图纸`;
    link.appendChild(img);
    const label = document.createElement('span');
    label.textContent = ` ${partNumber} - ${productName}`;
    link.appendChild(label);
    container.appendChild(link);
    container.appendChild(document.createElement('br'));
  });
}

window.addEventListener('load', generateDrawingLinks);

启动本地服务器的方法 #

• Node.js：先安装http-server（npm install -g http-server），然后在文件目录下运行http-server
• Python 3：在文件目录下运行python -m http.server

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