适用场景
适用于部署平台已经加载 OwlReport 全局构建产物,业务通过 window.beeReport.api 访问 API 的页面。
前置条件
在调用前确认 window.beeReport?.api 可用,并确保 window.Vue 存在;若 Vue 不在全局,作为 mount 第三参传入。通用全局接入不需要 BBP 菜单或 CLZ。
最小可运行示例
<div id="report-host" style="height: 640px"></div>
<script>
const container = document.querySelector("#report-host");
if (!container) throw new Error("Missing #report-host");
window.beeReport.api
.mount(
{
reportOptions: {
reportCode: "sales-summary",
reportVersion: "1.0.0",
},
},
container,
window.Vue,
)
.then((instance) => {
window.currentReport = instance;
})
.catch((error) => console.error("BeeReport mount failed", error));
// 页面离开时执行:window.beeReport.api.unmount(container);
</script>
接入步骤
- 等待 OwlReport 和 Vue 全局脚本加载完成。
- 创建真实存在的 DOM 容器,取得实际元素后再调用
mount;不要把选择器字符串直接传给当前实现。 - 等待 Promise resolve 后再调用实例方法。
- 页面或模块销毁时调用
unmount。
成功验证
控制台确认全局 API 存在,mount Promise resolve;移除页面时实例销毁,再次进入没有重复事件或重复报表。
常见问题
- 挂载点错误:先检查选择器拼写和调用时机,再把查询到的实际元素传给
mount。 - 602:全局 Vue 没有加载;传入当前页面实际使用的 Vue 构造器。
- 不要把
printOptions放进reportOptions;它是mountoptions 的同级字段。
