# 集成活页夹

## Content

## 1\. 概述

### 1.1 功能概述

%PRODUCT\_NAME% 支持将活页夹查看器嵌入到 Web 应用程序的任意 DIV 容器中去，为最终用户提供预览活页夹的能力。

## 2\. 操作步骤

### 2.1 安装集成包

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

    ```auto
    npm install @grapecity-software/wyn-integration
    ```

### 2.2 集成

1. 将 %PRODUCT\_NAME% 活页夹查看器添加到 DIV 容器 **wyn-root** 中。

    ```auto
    import { WynIntegration } from "@grapecity-software/wyn-integration";
    
    let viewer = null;
    const createDocumentBinderViewer = (baseUrl, token, documentId) => {
        if (viewer) {
            viewer.destroy();
            clearContainer();
        }
    
        WynIntegration.createDocumentBinderViewer({
            baseUrl: baseUrl,
            token: token,
            theme: 'default',
            language: 'zh',
            siteTitle: 'sds',
            documentId: documentId,
        }, '#wyn-root').then(ins => {
            viewer = ins;
        });
    }
    
    const clearContainer = () => {
        const container = document.querySelector('#wyn-root');
        if (container) container.innerHTML = '';
    }
    ```

* **参数说明：**
    * **baseURL** 指 %PRODUCT\_NAME% 服务器的地址。
    * **token** 指访问 %PRODUCT\_NAME% 服务器的令牌，在 %PRODUCT\_NAME%的「**系统管理>安全设置>生成令牌**」界面生成，**token** 所代表的用户需要具有**查看仪表板和查看报表的权限**。具体获取方法，请详见[生成令牌](/solutions/wyn/help/docs/back-stage/security-settings/generate-token)。
    * **documentId** 指活页夹文档 Id，可以从 %PRODUCT\_NAME% 的「**文档门户>工作空间**」中对应的活页夹文档列表获取。
        ![PixPin_2025-10-27_18-03-48](https://gccndocumentsitestorage.blob.core.chinacloudapi.cn/document-site-files/images/53718c5b-c627-4bb8-afaf-3db83ed6dcd8/PixPin_2025-10-27_18-03-48.b98749.png?width=700)