本文详解如何通过修改 spark-config.json 中的 js 配置项，将默认的 extent logo 替换为自定义图片，并确保路径解析正确、dom 操作生效。
本文详解如何通过修改 spark-config.json 中的 js 配置项，将默认的 extent logo 替换为自定义图片，并确保路径解析正确、dom 操作生效。
Extent Spark 报告默认在页眉显示 Extent 官方 Logo，但实际项目中常需替换为企业 Logo 以统一品牌视觉。关键在于：不能直接注入 HTML 字符串（如 <img> 标签），而应通过 JavaScript 动态修改现有 .logo 元素的 src 属性——因为 Extent 报告生成时已预置一个 <img class="logo"> 元素，只需复用并更新其资源路径。
正确的做法是使用 document.querySelector('.logo').setAttribute('src', '...')，而非隐藏原元素再插入新 DOM。以下是推荐的 spark-config.json 配置片段：
Pandas 配置文件报告生成器
下载
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
{
"theme": "STANDARD",
"encoding": "utf-8",
"protocol": "HTTPS",
"timelineEnabled": true,
"offlineMode": true,
"thumbnailForBase64": false,
"documentTitle": "Test Automation Report",
"reportName": "TA Report",
"timeStampFormat": "MMM dd, yyyy HH:mm:ss a",
"js": "document.querySelector('.logo').setAttribute('src', './src/test/resources/Logo/CompanyLogo.png');",
"css": ""
}✅ 注意事项与最佳实践：
- ✅ 路径必须相对且可访问：./src/test/resources/Logo/CompanyLogo.png 是相对于生成的 HTML 报告文件所在目录的路径。若报告最终输出至 target/site/extent-report/，则该图片需同步复制到对应相对路径下（构建脚本中需配置资源拷贝）。
- ✅ 优先使用 querySelector 而非 getElementsByClassName：前者返回单个元素，避免索引越界风险；后者返回 HTMLCollection，需显式取 [0]，容错性低。
- ❌ 禁用 <![CDATA[...]]> 和内联 HTML：js 字段仅接受纯 JavaScript 表达式字符串，不支持 XML/HTML 片段，否则会导致 JSON 解析失败或脚本静默失效。
- ⚠️ 确保图片格式与尺寸适配：推荐 PNG（透明背景），尺寸建议 ≤ 120×40 px，避免页眉布局溢出。
完成配置后，重新运行测试并生成报告，即可在页眉位置看到已生效的企业 Logo，原 Extent Logo 已被无缝替换。此方案简洁、可靠，符合 Extent 官方推荐的定制方式。
