Eden.Sun 发表于 2023-12-1 16:00:57

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

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

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

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

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

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. 启动项目,查看效果




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



页: [1]
查看完整版本: 【嵌入式分析】纯JS结构的项目中div集成报表