简介这是一款面向Autodesk Inventor设计师的前端BOM生成工具基于HTML和JavaScript实现能快速解析设计数据并生成结构清晰、准确率高的物料清单有效减少手工整理的时间成本。压缩包共30个文件其中JavaScript脚本占17个另有3个HTML页面、3个Markdown文档、2个CSS样式文件以及少量批处理、配置和项目脚本整体体积仅139KB部署和学习门槛低。已有1035人学习下载适合希望在浏览器环境中直接操作、提升BOM产出效率的AD用户。包内除核心的解析渲染模块如ibom.js、render.js外还提供环境初始化与清理脚本Initialize.bat/UnInitialize.bat、可自定义的config.ini配置项、以及已经打包好的dist目录用户既能阅读源码了解前端BOM的实现思路也能直接调用现成版本快速集成到现有设计流程中。对于工程团队而言这款工具能帮助统一物料信息的管理口径降低跨部门协作时的沟通误差。1. 同一块板子BOM 从 Excel 换成交互式网页对料时间能省一半贴片厂对料、硬件自检、采购核数这三类人拿到 AD 导出的 Excel BOM 时动作几乎一样先找位号再在 PCB 图上用眼睛扫对应封装。板子 800 个元件、BOM 600 行时漏看一个 0402 电阻的位号太正常了。InteractiveHtmlBOM 的做法是换一个载体把 AD(Altium Designer) 的 PCB 走线、焊盘、位号、封装、旋转角全部整理成浏览器直接打开的 HTML 页面元件按层渲染鼠标移到哪PCB 图就高亮到哪支持按位号搜索、正反面切换、按值筛选。整个工具用 HTML 和 JavaScript 编写没有后端和数据库依赖zip 内是完整前端源码加批处理脚本。对 AD 版本不敏感适合小批量产品研发团队和贴片厂做 BOM 标准化审查前的快速自检。2. 拆包Initialize.bat、rootPath.js 与 config.ini 的协作机制拿到压缩包先不要急着双击 Initialize.bat这个工具的运行链路是AD 脚本触发数据提取JavaScript 完成渲染。先搞清楚文件之间怎么配合后面定位问题才不慌。2.1 压缩包结构先看这三样InteractiveHtmlBomForAD/ ├── Initialize.bat ├── UnInitialize.bat ├── config.ini ├── rootPath.js ├── InteractiveHtmlBomForAD.PrjScr ├── mainWin.dfm ├── mainWin.js ├── core/ │ ├── ibom.js │ └── ... ├── modules-lite/ │ ├── split.js │ ├── pep.js │ └── lz-string.js ├── dist/ │ ├── ibom.html │ └── ibom.css └── README.mdmainWin.dfm是 AD 脚本系统里的 Delphi 表单定义mainWin.js是对应的 JScript 逻辑层这两个文件决定工具在 AD 内部弹出的交互窗口。core/ibom.js是浏览器端渲染主逻辑dist/ibom.html是最终被打包出来的页面模板。modules-lite里是压缩过的依赖库lz-string.js 负责数据压缩pep.js 做指针事件兼容。这种前后端分文件组织的思路很直接AD 侧脚本只负责从 PCB 里把数据取出来浏览器侧代码只负责画图和交互两边通过 JSON 字符串对接。2.2 Initialize.bat 与 UnInitialize.bat 在做什么批处理文件在 Windows 下的 AD 工具链里很常见它干的事本质上就是注册和反注册。常见做法是Initialize.bat 把当前目录写入 AD 的脚本搜索路径配置或者在注册表里登记脚本工程文件InteractiveHtmlBomForAD.PrjScrUnInitialize.bat 则删除这条记录。echo off REM 把当前目录追加到 Altium 脚本搜索路径 set SCRIPT_DIR%~dp0 reg add HKCU\Software\Altium\Altium Designer /v ScriptPath /t REG_SZ /d %SCRIPT_DIR% /f echo InteractiveHtmlBomForAD registered.逻辑说明%~dp0取当前 bat 所在目录保证路径在任何机器上都不会写死reg add写入当前用户的 Altium 脚本路径注册表项。参数上注意/f是强制覆盖如果你机器上已经配过别的脚本路径这一行会把原值挤掉执行前先看一眼原值。提示新版 AD 用 Preferences 里的 Scripts 面板管路径Initialize.bat 未必能覆盖所有版本最稳妥的注册方式是打开 AD进入 DXP - Run Script手动把InteractiveHtmlBomForAD.PrjScr加进去。批处理只是自动化这条路失败了不要硬刚手动挂载一样能用。2.3 config.ini 是你能改的第一层工具把输出参数全部外置到config.ini这是它比很多 AD 内置 BOM 脚本聪明的地方。不用改源代码记事本编辑就能调行为。参数名作用范围常见取值output_dir生成的 HTML 文件输出目录./outputboard_layer要导出的板层top/bottom/allinclude_values是否显示元件值true/falseinclude_designators是否显示位号true/falseblacklisted_layers屏蔽指定层不参与渲染逗号分隔层名skip_empty_pads跳过无网络焊盘true/falseskip_empty_pads这个参数在拼板时特别有用工艺边上的定位孔、无网络焊盘如果不屏蔽渲染出来的图上一堆孤立焊盘搜索元件时视觉干扰非常大。我一般会置为true但如果你要做开钢网文件检查得把它改回false否则少掉的焊盘会影响判断。blacklisted_layers处理的是 Multi-Cavity 这类机械层机械层上只有板框线和标注不参与电气 BOM 逻辑屏蔽后还能减小 HTML 体积。一个 4 层板、1200 个元件的项目导出 HTML 大约在 5 到 15 MB 之间如果超过 30 MB优先检查是不是把所有机械层都渲染进去了。3. 部署与导出从 AD 脚本触发到浏览器渲染的完整链路搞清楚文件职责后把工具跑起来只需要三步放目录、注册脚本、在 AD 里执行。但真正影响使用体验的是后面两个动作导出数据时勾选哪些选项以及生成 HTML 后如何分发给别人看。3.1 从 AD 脚本面板手动加载打开 AD进入 DXP - Run Script点击 Browse 找到InteractiveHtmlBomForAD.PrjScr加载后运行mainWin.js里的主流程。此时会弹出mainWin.dfm定义的那个窗口界面上一般有 Board Path、Output File Name、Layers 这几个输入项。Board Path : 当前打开的 .PcbDoc 路径 Output File Name: ibom.html Layers : top,bottom Fine Scale : 0.05这里最影响产出质量的是Fine Scale参数它控制 PCB 图形缩放到 HTML 画布时的最小精度。0.05 表示 50μm对应密间距 BGA 封装没问题如果板子上全是 0603 以上封装可以调到 0.1渲染速度更快HTML 体积也更小。Layer 填top,bottom会生成双面视图如果只填top底部元件就完全消失对料时会漏不要为了省体积这么干。3.2 用命令行或批处理联动手动点窗口适合偶尔用一次如果每周要出好几块板的 BOM把 AD 脚本调用写进批处理里更省事。AD 支持通过命令行参数把脚本跑起来结合 Initialize.bat 做环境准备可以做到一键生成多块板的 BOM。echo off set AD_EXEC:\Program Files\Altium\AD20\X2.EXE set PROJECT_DIRD:\projects\control_board REM 依次导出主控板和电源板的 BOM %DXP_EXE% %PROJECT_DIR%\control_board.PrjPCB -RScriptInteractiveHtmlBomForAD.PrjScr -RParamProcNamemainWin %DXP_EXE% %PROJECT_DIR%\power_board.PrjPCB -RScriptInteractiveHtmlBomForAD.PrjScr -RParamProcNamemainWin echo BOM generation finished.逻辑说明-RScript指定要运行的脚本工程-RParamProcNamemainWin告诉 AD 调用工程里的mainWin过程。关键是每行命令前cd到对应工程目录或用绝对路径AD 在脚本模式下不继承当前工作目录。注意AD 同一时间只能开一个实例批处理里连续执行两条命令时前一条没跑完会出现报错稳妥做法是在两条命令之间加timeout /t 5等 AD 完全退出。3.3 不带 AD 的数据重放这个工具生成的是完整独立 HTML意味着同事或者贴片厂根本不需要安装 AD 就能看图对料。只要把 ibom.html 发过去浏览器直接打开元件高亮、搜索、翻转全部可用。cd InteractiveHtmlBomForAD/dist python -m http.server 8080然后浏览器访问http://localhost:8080/ibom.html。逻辑说明虽然直接用 file:// 协议双击也能打开但部分版本的 Chrome 会限制本地文件读取资源起一个 HTTP 服务能避免这类权限问题。8080是默认端口如果你本地有服务占用换成 8787 之类的即可。如果访问后页面空白打开开发者工具看 Network 面板确认ibom.js、ibom.css是否 200 返回最常见原因是路径引用写的是绝对路径移动目录后资源加载失败。4. 深度解析 ibom.js高亮、分层、搜索与自定义模板的交互实现浏览器端才是这个工具真正出彩的部分。core/ibom.js不是简单画一张 PNG 图片它把 PCB 渲染成带交互行为的 DOM 结构这也是它敢叫 Interactive 的原因。4.1 数据流AD 脚本导出 JSONibom.js 转 DOMAD 脚本在 PCB 文档里遍历所有元件和走线每个元件提取位号、值、封装、中心坐标、旋转角、所在层、网络名序列化成一个 JSON 数组。坐标单位统一换算成公制毫米旋转角标准化为 0、90、180、270 四个值减少前端计算量。这个数组交给 ibom.js 后工具为每个元件生成一个分组节点function createComponentNode(comp) { const node document.createElementNS(http://www.w3.org/2000/svg, g); node.setAttribute(data-ref, comp.designator); node.setAttribute(data-layer, comp.layer); node.setAttribute(data-value, comp.value); node.setAttribute(transform, translate(${comp.x}, ${comp.y}) rotate(${comp.rotation})); comp.pads.forEach(pad { const rect document.createElementNS(svgNS, rect); rect.setAttribute(x, pad.x); rect.setAttribute(y, pad.y); rect.setAttribute(width, pad.w); rect.setAttribute(height, pad.h); node.appendChild(rect); }); return node; }逻辑说明SVG 的g分组节点用一个>function highlightFilter(input) { const q input.trim().toLowerCase(); if (!q) { document.querySelectorAll(.component).forEach(c { c.classList.remove(dimmed, highlighted); }); return; } document.querySelectorAll(.component).forEach(c { const ref c.dataset.ref.toLowerCase(); const val c.dataset.value.toLowerCase(); const hit ref.includes(q) || val.includes(q); c.classList.toggle(highlighted, hit); c.classList.toggle(dimmed, !hit); }); }逻辑说明includes是子串匹配搜索R会命中所有 R 开头的电阻位号同时也会命中 U1 这类含 R 的字符串所以实际使用中建议输入完整位号或值的关键片段。dimmed和highlighted是 CSS 类前者把透明度降到 0.1后者加一道高亮色描边。搜索匹配同时覆盖位号和值对料时输入10K能直接看到所有 10K 电阻分布在板子哪些区域比在 Excel 里筛选再回 PCB 图找快得多。正反面切换是最影响视觉体验的功能。双面 PCB 的元件如果上下层混在一起根本看不清。做法是给每个g节点加一个>function toggleLayer(layer) { document.querySelectorAll(.component).forEach(c { const isVisible c.dataset.layer layer || layer all; c.style.display isVisible ? : none; }); }逻辑说明这里用style.display直接控制显隐而不是用 class因为底层元件被隐藏后整体视觉干净。切到单层后顶层元件的位号文字也自动隐藏不会出现顶层底层位号叠在一起的情况。4.3 对料场景下真正有用的字段配置工具默认展示的字段不一定完全匹配生产需求输出 HTML 前可以在 config.ini 里定义哪些字段进入渲染结果。就我实践过的项目以下字段组合最实用字段名用途注意事项designator位号必须BOM 对料的锚点value值必须注意 10K 和 10k 的大小写统一footprint封装核对封装库是否正确layer所在层用于过滤贴片面quantity数量同一位号出现多次时提示manufacturer制造商采购核价用非必须封装字段在实际项目中很容易踩坑AD 里同一个封装名可能有R0603和0603R两种写法BOM 标准化审查时这类命名不一致最容易被揪出来。ImageHtmlBOM 的搜索框直接输入封装名就能把所有用错封装的元件一次性高亮出来。5. 进阶config.ini 调优与批量对料前的验证方法最后一块讲怎么把这个工具调成适合自己团队的样子。config.ini 里真正值得花时间研究的参数是坐标原点和输出精度相关的配置。默认坐标以 PCB 原点为基准但如果你从 AD 导出的是包含工艺边的拼板原点和实际贴片坐标会有偏差对料时视觉上会整体偏移。[output] ; 坐标偏移量单位 mm offset_x -3.5 offset_y 0 ; 输出精度0.05 适合密间距0.1 适合常规板 fine_scale 0.05 ; 屏蔽层逗号分隔 blacklisted_layers Multi-Cavity,Mechanical 15 [filter] ; 隐藏这些网络名对应的焊盘 skip_nets GND,VCC ; 跳过无网络焊盘 skip_empty_pads true [html] ; 自定义页面标题 page_title ControlBoard_BOM_RevA ; 是否启用鼠标滚轮缩放 enable_zoom true实际项目里我经常用 offset_x/y 对齐拼板。从 AD 导出的坐标如果包含工艺边整张图会向一侧偏移在浏览器里量测元件坐标和贴片机坐标对不上调试半天。解决办法是先在 AD 里记录工艺边宽度再在 config.ini 里反向补偿。比如左侧工艺边 3.5mm就在offset_x填-3.5图形整体左移对齐到贴片机坐标原点。验证工具生成的 BOM 是否准确我最常用的方法有两个第一用 AD 自带的 Bills of Materials 面板再导出一份 CSV和 InteractiveHtmlBOM 的搜索结果做抽样比对。随机抽 10 个位号确认位号、值、封装三项完全一致。第二开启浏览器的开发者工具执行下面这段代码检查是否有元件缺失坐标document.querySelectorAll(.component).forEach(c { if (c.getBoundingClientRect().width 0) { console.warn(Missing bounds: , c.dataset.ref); } });逻辑说明getBoundingClientRect().width 0意味着这个元件节点没有渲染出任何可视内容通常是坐标异常或 transform 属性少了单位。把 console 输出收集起来和 BOM 清单比对能快速发现 AD 脚本漏导出的元件。批处理集成上建议把工具的调用封装成一个独立脚本配合 AD 工程名做参数化。比如把板名和版本号通过环境变量传进去生成的文件名带版本后缀避免多人协作时互相覆盖文件set BOARD_NAMEcontrol_board set REVA2 InteractiveHtmlBomForAD.exe -b %BOARD_NAME%.PcbDoc -o %BOARD_NAME%_%REV%_ibom.html执行后检查 HTML 文件头部注释块里面会写入生成时间、AD 版本、源 PCB 文件名这些信息用于追溯是谁在什么时间生成的 BOM贴片厂反馈问题时能快速定位版本。如果 HTML 文件打开后没有出现元件只有板框线优先检查 AD 脚本运行时是否选中了 PCB 文档脚本拿不到当前文档时输出的就是一个空 JSON 数组渲染结果自然只有背景框。本文还有配套的精品资源点击获取
交互式HTML BOM：替代Excel，让PCB对料效率翻倍
简介这是一款面向Autodesk Inventor设计师的前端BOM生成工具基于HTML和JavaScript实现能快速解析设计数据并生成结构清晰、准确率高的物料清单有效减少手工整理的时间成本。压缩包共30个文件其中JavaScript脚本占17个另有3个HTML页面、3个Markdown文档、2个CSS样式文件以及少量批处理、配置和项目脚本整体体积仅139KB部署和学习门槛低。已有1035人学习下载适合希望在浏览器环境中直接操作、提升BOM产出效率的AD用户。包内除核心的解析渲染模块如ibom.js、render.js外还提供环境初始化与清理脚本Initialize.bat/UnInitialize.bat、可自定义的config.ini配置项、以及已经打包好的dist目录用户既能阅读源码了解前端BOM的实现思路也能直接调用现成版本快速集成到现有设计流程中。对于工程团队而言这款工具能帮助统一物料信息的管理口径降低跨部门协作时的沟通误差。1. 同一块板子BOM 从 Excel 换成交互式网页对料时间能省一半贴片厂对料、硬件自检、采购核数这三类人拿到 AD 导出的 Excel BOM 时动作几乎一样先找位号再在 PCB 图上用眼睛扫对应封装。板子 800 个元件、BOM 600 行时漏看一个 0402 电阻的位号太正常了。InteractiveHtmlBOM 的做法是换一个载体把 AD(Altium Designer) 的 PCB 走线、焊盘、位号、封装、旋转角全部整理成浏览器直接打开的 HTML 页面元件按层渲染鼠标移到哪PCB 图就高亮到哪支持按位号搜索、正反面切换、按值筛选。整个工具用 HTML 和 JavaScript 编写没有后端和数据库依赖zip 内是完整前端源码加批处理脚本。对 AD 版本不敏感适合小批量产品研发团队和贴片厂做 BOM 标准化审查前的快速自检。2. 拆包Initialize.bat、rootPath.js 与 config.ini 的协作机制拿到压缩包先不要急着双击 Initialize.bat这个工具的运行链路是AD 脚本触发数据提取JavaScript 完成渲染。先搞清楚文件之间怎么配合后面定位问题才不慌。2.1 压缩包结构先看这三样InteractiveHtmlBomForAD/ ├── Initialize.bat ├── UnInitialize.bat ├── config.ini ├── rootPath.js ├── InteractiveHtmlBomForAD.PrjScr ├── mainWin.dfm ├── mainWin.js ├── core/ │ ├── ibom.js │ └── ... ├── modules-lite/ │ ├── split.js │ ├── pep.js │ └── lz-string.js ├── dist/ │ ├── ibom.html │ └── ibom.css └── README.mdmainWin.dfm是 AD 脚本系统里的 Delphi 表单定义mainWin.js是对应的 JScript 逻辑层这两个文件决定工具在 AD 内部弹出的交互窗口。core/ibom.js是浏览器端渲染主逻辑dist/ibom.html是最终被打包出来的页面模板。modules-lite里是压缩过的依赖库lz-string.js 负责数据压缩pep.js 做指针事件兼容。这种前后端分文件组织的思路很直接AD 侧脚本只负责从 PCB 里把数据取出来浏览器侧代码只负责画图和交互两边通过 JSON 字符串对接。2.2 Initialize.bat 与 UnInitialize.bat 在做什么批处理文件在 Windows 下的 AD 工具链里很常见它干的事本质上就是注册和反注册。常见做法是Initialize.bat 把当前目录写入 AD 的脚本搜索路径配置或者在注册表里登记脚本工程文件InteractiveHtmlBomForAD.PrjScrUnInitialize.bat 则删除这条记录。echo off REM 把当前目录追加到 Altium 脚本搜索路径 set SCRIPT_DIR%~dp0 reg add HKCU\Software\Altium\Altium Designer /v ScriptPath /t REG_SZ /d %SCRIPT_DIR% /f echo InteractiveHtmlBomForAD registered.逻辑说明%~dp0取当前 bat 所在目录保证路径在任何机器上都不会写死reg add写入当前用户的 Altium 脚本路径注册表项。参数上注意/f是强制覆盖如果你机器上已经配过别的脚本路径这一行会把原值挤掉执行前先看一眼原值。提示新版 AD 用 Preferences 里的 Scripts 面板管路径Initialize.bat 未必能覆盖所有版本最稳妥的注册方式是打开 AD进入 DXP - Run Script手动把InteractiveHtmlBomForAD.PrjScr加进去。批处理只是自动化这条路失败了不要硬刚手动挂载一样能用。2.3 config.ini 是你能改的第一层工具把输出参数全部外置到config.ini这是它比很多 AD 内置 BOM 脚本聪明的地方。不用改源代码记事本编辑就能调行为。参数名作用范围常见取值output_dir生成的 HTML 文件输出目录./outputboard_layer要导出的板层top/bottom/allinclude_values是否显示元件值true/falseinclude_designators是否显示位号true/falseblacklisted_layers屏蔽指定层不参与渲染逗号分隔层名skip_empty_pads跳过无网络焊盘true/falseskip_empty_pads这个参数在拼板时特别有用工艺边上的定位孔、无网络焊盘如果不屏蔽渲染出来的图上一堆孤立焊盘搜索元件时视觉干扰非常大。我一般会置为true但如果你要做开钢网文件检查得把它改回false否则少掉的焊盘会影响判断。blacklisted_layers处理的是 Multi-Cavity 这类机械层机械层上只有板框线和标注不参与电气 BOM 逻辑屏蔽后还能减小 HTML 体积。一个 4 层板、1200 个元件的项目导出 HTML 大约在 5 到 15 MB 之间如果超过 30 MB优先检查是不是把所有机械层都渲染进去了。3. 部署与导出从 AD 脚本触发到浏览器渲染的完整链路搞清楚文件职责后把工具跑起来只需要三步放目录、注册脚本、在 AD 里执行。但真正影响使用体验的是后面两个动作导出数据时勾选哪些选项以及生成 HTML 后如何分发给别人看。3.1 从 AD 脚本面板手动加载打开 AD进入 DXP - Run Script点击 Browse 找到InteractiveHtmlBomForAD.PrjScr加载后运行mainWin.js里的主流程。此时会弹出mainWin.dfm定义的那个窗口界面上一般有 Board Path、Output File Name、Layers 这几个输入项。Board Path : 当前打开的 .PcbDoc 路径 Output File Name: ibom.html Layers : top,bottom Fine Scale : 0.05这里最影响产出质量的是Fine Scale参数它控制 PCB 图形缩放到 HTML 画布时的最小精度。0.05 表示 50μm对应密间距 BGA 封装没问题如果板子上全是 0603 以上封装可以调到 0.1渲染速度更快HTML 体积也更小。Layer 填top,bottom会生成双面视图如果只填top底部元件就完全消失对料时会漏不要为了省体积这么干。3.2 用命令行或批处理联动手动点窗口适合偶尔用一次如果每周要出好几块板的 BOM把 AD 脚本调用写进批处理里更省事。AD 支持通过命令行参数把脚本跑起来结合 Initialize.bat 做环境准备可以做到一键生成多块板的 BOM。echo off set AD_EXEC:\Program Files\Altium\AD20\X2.EXE set PROJECT_DIRD:\projects\control_board REM 依次导出主控板和电源板的 BOM %DXP_EXE% %PROJECT_DIR%\control_board.PrjPCB -RScriptInteractiveHtmlBomForAD.PrjScr -RParamProcNamemainWin %DXP_EXE% %PROJECT_DIR%\power_board.PrjPCB -RScriptInteractiveHtmlBomForAD.PrjScr -RParamProcNamemainWin echo BOM generation finished.逻辑说明-RScript指定要运行的脚本工程-RParamProcNamemainWin告诉 AD 调用工程里的mainWin过程。关键是每行命令前cd到对应工程目录或用绝对路径AD 在脚本模式下不继承当前工作目录。注意AD 同一时间只能开一个实例批处理里连续执行两条命令时前一条没跑完会出现报错稳妥做法是在两条命令之间加timeout /t 5等 AD 完全退出。3.3 不带 AD 的数据重放这个工具生成的是完整独立 HTML意味着同事或者贴片厂根本不需要安装 AD 就能看图对料。只要把 ibom.html 发过去浏览器直接打开元件高亮、搜索、翻转全部可用。cd InteractiveHtmlBomForAD/dist python -m http.server 8080然后浏览器访问http://localhost:8080/ibom.html。逻辑说明虽然直接用 file:// 协议双击也能打开但部分版本的 Chrome 会限制本地文件读取资源起一个 HTTP 服务能避免这类权限问题。8080是默认端口如果你本地有服务占用换成 8787 之类的即可。如果访问后页面空白打开开发者工具看 Network 面板确认ibom.js、ibom.css是否 200 返回最常见原因是路径引用写的是绝对路径移动目录后资源加载失败。4. 深度解析 ibom.js高亮、分层、搜索与自定义模板的交互实现浏览器端才是这个工具真正出彩的部分。core/ibom.js不是简单画一张 PNG 图片它把 PCB 渲染成带交互行为的 DOM 结构这也是它敢叫 Interactive 的原因。4.1 数据流AD 脚本导出 JSONibom.js 转 DOMAD 脚本在 PCB 文档里遍历所有元件和走线每个元件提取位号、值、封装、中心坐标、旋转角、所在层、网络名序列化成一个 JSON 数组。坐标单位统一换算成公制毫米旋转角标准化为 0、90、180、270 四个值减少前端计算量。这个数组交给 ibom.js 后工具为每个元件生成一个分组节点function createComponentNode(comp) { const node document.createElementNS(http://www.w3.org/2000/svg, g); node.setAttribute(data-ref, comp.designator); node.setAttribute(data-layer, comp.layer); node.setAttribute(data-value, comp.value); node.setAttribute(transform, translate(${comp.x}, ${comp.y}) rotate(${comp.rotation})); comp.pads.forEach(pad { const rect document.createElementNS(svgNS, rect); rect.setAttribute(x, pad.x); rect.setAttribute(y, pad.y); rect.setAttribute(width, pad.w); rect.setAttribute(height, pad.h); node.appendChild(rect); }); return node; }逻辑说明SVG 的g分组节点用一个>function highlightFilter(input) { const q input.trim().toLowerCase(); if (!q) { document.querySelectorAll(.component).forEach(c { c.classList.remove(dimmed, highlighted); }); return; } document.querySelectorAll(.component).forEach(c { const ref c.dataset.ref.toLowerCase(); const val c.dataset.value.toLowerCase(); const hit ref.includes(q) || val.includes(q); c.classList.toggle(highlighted, hit); c.classList.toggle(dimmed, !hit); }); }逻辑说明includes是子串匹配搜索R会命中所有 R 开头的电阻位号同时也会命中 U1 这类含 R 的字符串所以实际使用中建议输入完整位号或值的关键片段。dimmed和highlighted是 CSS 类前者把透明度降到 0.1后者加一道高亮色描边。搜索匹配同时覆盖位号和值对料时输入10K能直接看到所有 10K 电阻分布在板子哪些区域比在 Excel 里筛选再回 PCB 图找快得多。正反面切换是最影响视觉体验的功能。双面 PCB 的元件如果上下层混在一起根本看不清。做法是给每个g节点加一个>function toggleLayer(layer) { document.querySelectorAll(.component).forEach(c { const isVisible c.dataset.layer layer || layer all; c.style.display isVisible ? : none; }); }逻辑说明这里用style.display直接控制显隐而不是用 class因为底层元件被隐藏后整体视觉干净。切到单层后顶层元件的位号文字也自动隐藏不会出现顶层底层位号叠在一起的情况。4.3 对料场景下真正有用的字段配置工具默认展示的字段不一定完全匹配生产需求输出 HTML 前可以在 config.ini 里定义哪些字段进入渲染结果。就我实践过的项目以下字段组合最实用字段名用途注意事项designator位号必须BOM 对料的锚点value值必须注意 10K 和 10k 的大小写统一footprint封装核对封装库是否正确layer所在层用于过滤贴片面quantity数量同一位号出现多次时提示manufacturer制造商采购核价用非必须封装字段在实际项目中很容易踩坑AD 里同一个封装名可能有R0603和0603R两种写法BOM 标准化审查时这类命名不一致最容易被揪出来。ImageHtmlBOM 的搜索框直接输入封装名就能把所有用错封装的元件一次性高亮出来。5. 进阶config.ini 调优与批量对料前的验证方法最后一块讲怎么把这个工具调成适合自己团队的样子。config.ini 里真正值得花时间研究的参数是坐标原点和输出精度相关的配置。默认坐标以 PCB 原点为基准但如果你从 AD 导出的是包含工艺边的拼板原点和实际贴片坐标会有偏差对料时视觉上会整体偏移。[output] ; 坐标偏移量单位 mm offset_x -3.5 offset_y 0 ; 输出精度0.05 适合密间距0.1 适合常规板 fine_scale 0.05 ; 屏蔽层逗号分隔 blacklisted_layers Multi-Cavity,Mechanical 15 [filter] ; 隐藏这些网络名对应的焊盘 skip_nets GND,VCC ; 跳过无网络焊盘 skip_empty_pads true [html] ; 自定义页面标题 page_title ControlBoard_BOM_RevA ; 是否启用鼠标滚轮缩放 enable_zoom true实际项目里我经常用 offset_x/y 对齐拼板。从 AD 导出的坐标如果包含工艺边整张图会向一侧偏移在浏览器里量测元件坐标和贴片机坐标对不上调试半天。解决办法是先在 AD 里记录工艺边宽度再在 config.ini 里反向补偿。比如左侧工艺边 3.5mm就在offset_x填-3.5图形整体左移对齐到贴片机坐标原点。验证工具生成的 BOM 是否准确我最常用的方法有两个第一用 AD 自带的 Bills of Materials 面板再导出一份 CSV和 InteractiveHtmlBOM 的搜索结果做抽样比对。随机抽 10 个位号确认位号、值、封装三项完全一致。第二开启浏览器的开发者工具执行下面这段代码检查是否有元件缺失坐标document.querySelectorAll(.component).forEach(c { if (c.getBoundingClientRect().width 0) { console.warn(Missing bounds: , c.dataset.ref); } });逻辑说明getBoundingClientRect().width 0意味着这个元件节点没有渲染出任何可视内容通常是坐标异常或 transform 属性少了单位。把 console 输出收集起来和 BOM 清单比对能快速发现 AD 脚本漏导出的元件。批处理集成上建议把工具的调用封装成一个独立脚本配合 AD 工程名做参数化。比如把板名和版本号通过环境变量传进去生成的文件名带版本后缀避免多人协作时互相覆盖文件set BOARD_NAMEcontrol_board set REVA2 InteractiveHtmlBomForAD.exe -b %BOARD_NAME%.PcbDoc -o %BOARD_NAME%_%REV%_ibom.html执行后检查 HTML 文件头部注释块里面会写入生成时间、AD 版本、源 PCB 文件名这些信息用于追溯是谁在什么时间生成的 BOM贴片厂反馈问题时能快速定位版本。如果 HTML 文件打开后没有出现元件只有板框线优先检查 AD 脚本运行时是否选中了 PCB 文档脚本拿不到当前文档时输出的就是一个空 JSON 数组渲染结果自然只有背景框。本文还有配套的精品资源点击获取
