本文探讨了在纯客户端javascript环境中，如何动态生成指向本地文件系统中带修订号pdf文档的链接。核心挑战在于浏览器出于安全考虑，禁止客户端javascript直接访问本地文件系统以列出文件。我们将深入分析这一限制，并提出几种解决方案，包括需要服务器支持的理想方法，以及在严格无服务器环境下，通过预处理数据实现近似动态链接的策略。
1. 问题背景：动态修订号与本地文件链接的挑战
在产品管理或文档系统中，工程图纸（通常为PDF格式）经常会根据设计变更而更新修订号。例如，一个零件号为 1234 的图纸，其文件名可能从 1234.pdf 变为 1234 Rev.1.pdf，甚至 1234 Rev.2.pdf。在一个纯JavaScript构建的本地网页应用中，用户希望根据已知的零件号（如 1234）生成一个动态链接，该链接能自动指向该零件号的最新修订版图纸，而无需每次修订后手动修改链接目标。具体而言，用户期望实现类似 partnumber*.pdf 的模糊匹配机制。
然而，这一需求在“无服务器”且“仅在本地文件夹运行”的环境下，面临着核心的技术障碍。
2. 核心障碍：浏览器安全模型与本地文件系统访问限制
浏览器为了保护用户隐私和系统安全，实施了严格的安全沙箱机制。这意味着运行在浏览器中的客户端JavaScript代码：
因此，直接在客户端JavaScript中实现“动态查找最新修订号PDF”的功能，由于浏览器安全模型的限制，是不可行的。
立即学习“Java免费学习笔记（深入）”；
3. 解决方案探讨
尽管存在上述限制，但我们可以通过一些策略来近似或间接实现这一目标，具体取决于对“无服务器”和“本地文件夹”这两个条件的严格程度。
3.1 方案一：引入服务器端支持（最理想但与原需求冲突）
如果能够放宽“无服务器”的限制，引入一个轻量级的本地服务器（例如使用Node.js、Python Flask或PHP内置服务器），将是解决此问题的最直接和最健壮的方法。
原理： 服务器端拥有直接访问文件系统的权限。它可以扫描存放PDF文件的目录，识别每个零件号的最新修订版文件，并将这些信息通过API接口提供给前端JavaScript。
实现方式（以Node.js为例）：
-
服务器端脚本：
创建一个Node.js脚本，用于扫描指定的PDF目录，解析文件名以提取零件号和修订号，并构建一个映射表（例如，{ "1234": "1234 Rev.1.pdf", "5678": "5678 Rev.2.pdf" }）。然后，通过一个简单的HTTP服务器将此数据作为JSON响应给客户端。
// server.js (Node.js)
const fs = require('fs');
const path = require('path');
const http = require('http');
const PDF_DIRECTORY = path.join(__dirname, 'drawings'); // 假设PDF文件在 'drawings' 子目录
/**
* 扫描目录并返回每个零件号的最新修订版PDF文件名
* @param {string} directoryPath - PDF文件目录的路径
* @returns {Object.} 映射表，键为零件号，值为最新PDF文件名
*/
function getLatestDrawingFiles(directoryPath) {
const drawings = {}; // 临时存储 { "partNumber": { fileName: "...", revision: N } }
try {
const files = fs.readdirSync(directoryPath);
files.forEach(file => {
if (file.endsWith('.pdf')) {
// 假设文件名格式为 "PN.pdf" 或 "PN Rev.X.pdf"
// 正则表达式用于匹配零件号和可选的修订号
const match = file.match(/^(\d+)(?: Rev\.(\d+))?\.pdf$/);
if (match) {
const partNumber = match[1];
// 如果有修订号，则解析为整数；否则为0
const revision = match[2] ? parseInt(match[2]) : 0;
// 检查是否为当前零件号的最新修订版
if (!drawings[partNumber] || revision > (drawings[partNumber].revision || 0)) {
drawings[partNumber] = {
fileName: file,
revision: revision
};
}
}
}
});
} catch (err) {
console.error("Error reading directory:", err);
return {};
}
// 格式化为最终输出
const result = {};
for (const pn in drawings) {
result[pn] = drawings[pn].fileName;
}
return result;
}
// 创建HTTP服务器
const server = http.createServer((req, res) => {
if (req.url === '/api/drawings' && req.method === 'GET') {
res.setHeader('Content-Type', 'application/json');
// 允许跨域请求，如果客户端和服务器不在同一源
res.setHeader('Access-Control-Allow-Origin', '*');
const latestDrawings = getLatestDrawingFiles(PDF_DIRECTORY);
res.end(JSON.stringify(latestDrawings));
} else if (req.url.startsWith('/drawings/') && req.method === 'GET') {
// 静态文件服务，允许浏览器直接请求PDF文件
const filePath = path.join(PDF_DIRECTORY, path.basename(req.url));
fs.readFile(filePath, (err, data) => {
if (err) {
res.writeHead(404, { 'Content-Type': 'text/plain' });
res.end('File not found');
} else {
res.writeHead(200, { 'Content-Type': 'application/pdf' });
res.end(data);
}
});
}
else {
res.writeHead(404, { 'Content-Type': 'text/plain' });
res.end('Not Found');
}
});
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
console.log(`Access drawing data at http://localhost:${PORT}/api/drawings`);
});
-
客户端JavaScript：
前端JavaScript通过 fetch API从服务器获取最新的图纸映射数据，然后根据产品零件号动态生成链接。
产品图纸链接
产品图纸列表
