深色模式
五分钟接入
下面四步，每一步都能单独验证。把 https://report.example.com 换成你们部署的报表服务地址。
第一步：拿到报表地址
打开报表服务首页，在报表列表里找到要嵌的那张，点这一行的**「嵌入」**，对话框里给出两样东西：
- 报表地址：
https://report.example.com/?id=r260922123456&view=1 - 嵌入代码：一段可以直接粘的
<iframe>
id 是报表 id，view=1 表示查看态。手上只有报表 id 时，自己照这个格式拼也一样。
报表必须先发布
链接指向的是当前发布版。没发布过的报表打开只显示一句「这张报表还没有发布」。
第二步：粘进你们的页面
html
<iframe
src="https://report.example.com/?id=r260922123456&view=1"
style="width:100%;height:720px;border:0"
allowfullscreen
></iframe>到这一步页面上就能看到报表了。height 先写个固定值，第四步再让它自适应。
第三步：把筛选条件喂给报表
报表里的每个筛选条件都有一个 id（月份 month、门店 store、科室 dept……），直接写进链接：
html
<iframe src="https://report.example.com/?id=r260922123456&view=1&month=2026-08&store=S001"></iframe>打开就是 2026 年 8 月、S001 这家店的数。
宿主指定的口径不想让看的人改，加 lock：
&month=2026-08&lock=month被锁住的条件显示出来但改不了。更多写法看链接参数。
条件 id 要对得上
链接里写了、报表里没有的参数名会被忽略，页面顶上会列出来提醒你。看到提示就去核对报表筛选栏里的条件 id。
第四步：让 iframe 高度跟着内容走
报表页会把自己的内容高度发给宿主页面，宿主照着调 iframe 高度，页面里就不会出现第二条滚动条。
html
<iframe id="report" src="https://report.example.com/?id=r260922123456&view=1"
style="width:100%;height:480px;border:0"></iframe>
<script>
window.addEventListener('message', (e) => {
const msg = e.data
if (!msg || msg.source !== 'conch-report') return
if (msg.type === 'height') {
document.getElementById('report').style.height = msg.height + 'px'
}
})
</script>生产上把判断收紧成只认报表服务的域名：
js
if (e.origin !== 'https://report.example.com') return完整示例
一个能直接保存成 .html 打开的最小宿主页面：
html
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8" /><title>经营看板</title></head>
<body style="margin:0;font-family:system-ui">
<h2 style="padding:16px 20px;margin:0">经营看板</h2>
<iframe id="report"
src="https://report.example.com/?id=r260922123456&view=1&month=2026-08&chrome=0"
style="width:100%;height:480px;border:0"></iframe>
<script>
const REPORT_ORIGIN = 'https://report.example.com'
const frame = document.getElementById('report')
window.addEventListener('message', (e) => {
if (e.origin !== REPORT_ORIGIN) return
const msg = e.data
if (!msg || msg.source !== 'conch-report') return
if (msg.type === 'height') frame.style.height = msg.height + 'px'
if (msg.type === 'ready') console.log('报表已打开', msg.title, msg.version)
if (msg.type === 'params') console.log('筛选条件变成了', msg.params)
})
// 不刷新 iframe 改条件
function setMonth(month) {
frame.contentWindow.postMessage(
{ source: 'conch-report-host', type: 'setParams', params: { month } },
REPORT_ORIGIN,
)
}
</script>
</body>
</html>chrome=0 去掉了报表自带的页头（标题、刷新、导出），页头由宿主自己做。