【嵌入式分析】纯JS结构的项目中div集成报表

收藏

本帖最后由 Bella.Yuan 于 2023-12-1 16:29 编辑

在 Wyn7.0 版本之后，div集成的方式有了优化，首先报表和仪表板不用再分开集成；其次，仪表板集成不用再引入 Wyn 服务的插件。帮助我们更方便的进行集成。但是目前只发布了通过npm依赖的方式进行集成。我们今天介绍如何在纯JS项目中集成报表和仪表板。

1. 下载依赖文件
先找一个项目通过 npm 的方式下载 wyn 的依赖文件：npm install @grapecity/wyn-integration
image.png989788207.png

2. 把下载的 node_modules 依赖文件全部拷贝到我们的新的项目中
image.png155533141.png

3. 引入依赖文件，编写集成代码

<script type="text/javascript" src="./node_modules/@grapecity/wyn-integration/build/WynIntegration.js"></script>

<script>
// 集成报表查看器
window.viewerInstance = null;
WynIntegration.WynIntegration.createReportViewer({
baseUrl: 'http://localhost:51980/',
token: '9D2E6BB2A5AC05EAB95B0CB573E571EFFD64E33E3BF4A25C8E2821A7FF657842',
reportId: '12d578ad-535e-4b30-9f04-237399a2ae8a',
}, '#wyn-root').then(function (ins) {
window.viewerInstance = ins;
});
</script>

4. 启动项目，查看效果
image.png410616454.png

5. 其他模块集成说明
js 集成文问题难点在于如何绕过 npm 框架引入、使用资源文件，按照前面的方式获取、引入即可。代码的集成和编写方式与 npm 提供的集成方式一致。可以在 npm官网上查看：https://www.npmjs.com/package/@grapecity/wyn-integration
image.png605848998.png

		自动登录	找回密码
密码			立即注册

[嵌入式分析] 【嵌入式分析】纯JS结构的项目中div集成报表

0 个回复

Wyn高级认证

Wyn认证