集成报表

1. 概述

1.1 功能概述

用户可以把 Wyn 的报表嵌入到 Web 应用程序的 DIV 容器中去，在应用程序中直接集成 Wyn 报表，为用户提供基于业务上下文的报表数据。

2. 操作步骤

2.1 增加跨域设置

1. 报表集成中除了常规的增加跨域白名单之外，还需要增加如下响应头。

   location

   content-disposition

   
   

2.2 安装最新的集成包

1. 安装最新的集成包：https://www.npmjs.com/package/@grapecity-software/wyn-integration

   npm install @grapecity-software/wyn-integration

2.3 集成

1. 将 Wyn 报表添加到 DIV 容器 wyn-root 中。

   import { WynIntegration } from "@grapecity-software/wyn-integration";
   
   let report:any = null;
   const createReport = (baseUrl, token, reportId) => {
        if (report) {
           report.destroy();
           clearContainer();
        }
   
        WynIntegration.createReportViewer({
            baseUrl: baseUrl,
            reportId: reportId, //报表文档ID
            token: token,
            //reportParameters: [
            //    { name: '报表参数名称', values: ['报表参数值'] },           
            //],
        }, '#wyn-root').then(ins => {
           report = ins;
        });
   }
   
    const clearContainer = () => {
        const container = document.querySelector('#wyn-root');
        if (container) container.innerHTML = '';
    }

• 参数说明：

  • baseURL 指 Wyn 服务器的地址。

  • token 指访问 Wyn 服务器的令牌，在 Wyn 的的「系统管理>安全设置>生成令牌」界面生成，token 所代表的用户需要具有创建报表的权限。具体获取方法，请详见生成令牌。

  • reportId 指报表文档 Id，可以从Wyn 的「文档门户>工作空间」中对应的报表文档列表获取。

    
    

  • reportParameters 指报表文档的报表参数。格式如下：

    reportParameters: [
      { name: 'StringParameter', values: ['abc'] }, //单值字符串
      { name: 'IntegerMultivalueParameter', values: [1, 2, 3] }, //多值
      { name: 'BooleanParameter', values: [true] }, //布尔类型
    ],
    例如：
    reportParameters: [                        
      {"地区": ['华北'] }                
    ]

  • 更多的设置参考API文档：report。

3. 资源下载

1. 示例文件包说明： 已包含报表查看器及报表设计器两部分，您可直接导入至对应版本系统中查看使用。

   wyn-integration-vue-report.zip

   wyn-integration-react-report.zip

   注意： 本示例压缩包基于8.1版本制作，请使用8.1及以上版本并参照导入与导出文档操作（低版本可能存在兼容性问题，建议升级）。