# # 集成

本节将提供详细的教程来帮助您快速开始使用 Foxit PDF SDK for Web 构建一个简单的 PDF 阅读器和一个功能齐全的 PDF 阅读器。

## # 前期准备工作

### # 创建一个新的 Web 工程

1. 创建一个新的目录作为工程目录，比如 "D:/test_web"。
2. 将 Foxit PDF SDK for Web 包下的 "lib", "server", 和 "external" (如果您需要使用字体资源) 文件夹, 以及 "package.json" 文件拷贝到 "D:/test_web"。
3. 拷贝一个 PDF 文件到 "D:/test_web"，比如 "docs" 文件夹下的 demo 手册。
4. 在 "D:/test_web" 文件夹下创建一个html 文件 (index.html)。则 test_web 目录如下所示：

    test_web
        +-- lib          (copy from the Foxit PDF SDK for Web package)
        +-- server       (copy from the Foxit PDF SDK for Web package)
        +-- package.json (copy from the Foxit PDF SDK for Web package)
        +-- index.html

index.html的内容如下所示:

    <html>
    <head>
        <meta charset="utf-8">
        <style>
            .fv__ui-tab-nav li span {
                color: #636363;
            }
            .flex-row {
                display: flex;
                flex-direction: row;
            }
        </style>
        <!-- ignore other unimportant code -->
    </head>
    <body>
    </body>
    </html>

## # 集成基础的 webViewer 到工程中

本节主要介绍如何在上述创建的工程中使用 PDFViewCtrl 集成简单 webViewer 示例。请按照如下的步骤：

1. 添加 /lib/PDFViewCtrl.css 样式到 HTML 页面的`<head>`标签下：

    <link rel="stylesheet" type="text/css"  href="./lib/PDFViewCtrl.css">

2. 导入 "lib" 文件夹下的 "PDFViewCtrl.full.js" 库:

    <script src="./lib/PDFViewCtrl.full.js"></script>

3. 在 HTML 的 `<body>` 标签下，添加 `<div>` 作为 web viewer 容器：

    <div id="pdf-viewer"></div>

4. 初始化 PDFViewCtrl:

    <script>
         var licenseSN = "Your license SN";
         var licenseKey = "Your license Key";
    </script>
    <script>
         var PDFViewer = PDFViewCtrl.PDFViewer;
         var pdfViewer = new PDFViewer({
             libPath: './lib', // the library path of Web SDK.
             jr: {
                 licenseSN: licenseSN,
                 licenseKey: licenseKey,
             }
         });
         pdfViewer.init('#pdf-viewer'); // the div (id="pdf-viewer")
    <script>

备注 : 在 Foxit PDF SDK for Web 包下的 examples/license-key.js 文件中可获取 licenseSN 和 licenseKey 的试用值。

5. 打开一个 PDF 文档：

    // modify the file path as your need.
    fetch('/docs/FoxitPDFSDKforWeb_DemoGuide.pdf').then(function(response) {
        response.arrayBuffer().then(function(buffer) {
            pdfViewer.openPDFByFile(buffer);
        })
    })

以上是使用 PDFViewCtrl 将简单 webViewer 集成到您创建的工程中的主要步骤。当完成后，刷新浏览器(<index.html>).

此时，它就是一个简单的 web PDF viewer 了。您可以通过右键点击页面的任何地方，然后选择放大或缩小选项来对PDF文档进行放大/缩小。

index.html 的内容如下所示：

    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./lib/PDFViewCtrl.css">

    <!-- You can delete the following style because it doesn't work in this project -->
        <style>
            .fv__ui-tab-nav li span {
                color: #636363;
            }
            .flex-row {
                display: flex;
                flex-direction: row;
            }
    </style>
        <!-- ignore other unimportant code -->
    </head>
    <body>
        <div id="pdf-viewer"></div>
        <script src="./lib/PDFViewCtrl.full.js"></script>
        <script>
            var licenseSN = "Your license SN";
            var licenseKey = "Your license Key";
        </script>
        <script>
            var PDFViewer = PDFViewCtrl.PDFViewer;
            var pdfViewer = new PDFViewer({
                libPath: './lib', // the library path of Web SDK.
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey,
                }
            });
            pdfViewer.init('#pdf-viewer'); // the div (id="pdf-viewer")

            // modify the file path as your need.
            fetch('/FoxitPDFSDKforWeb_DemoGuide.pdf').then(function (response) {
                response.arrayBuffer().then(function (buffer) {
                    pdfViewer.openPDFByFile(buffer);
                })
            })

        </script>
    </body>
    </html>

## # 集成功能完整的 webViewer

上一节介绍了如何使用 PDFViewCtrl 集成简单 webViewer 。本节将在创建的web工程的基础上，介绍如何使用 UIExtension 集成高级 webViewer。请按照如下的步骤：

1. 添加 /lib/UIExtension.css 样式到 HTML 页面的 `<head>` 标签下：

    <link rel="stylesheet" type="text/css" href="./lib/UIExtension.css">

2. 导入`lib` 文件夹下的 "UIExtension.full.js" 库:

    <script src="./lib/UIExtension.full.js"></script>

3. 在 HTML 的 `<body>` 标签下，添加 `<div>` 作为 webViewer 容器：

    <div id="pdf-ui"></div>

4. 初始化 UIExtension:

    <script>
         var licenseSN = "Your license SN";
         var licenseKey = "Your license Key";
    </script>
    <script>
        var pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: './lib', // the library path of web sdk.
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: '#pdf-ui' // the div (id="pdf-ui").
        });
    </script>

备注 : 在 Foxit PDF SDK for Web 包下的 examples/license-key.js 文件中可获取 licenseSN 和 licenseKey 的试用值。

5. 打开一个 PDF 文档:

    // modify the file path as your need.
    fetch('/docs/FoxitPDFSDKforWeb_DemoGuide.pdf').then(function(response) {
        response.arrayBuffer().then(function(buffer) {
            pdfui.openPDFByFile(buffer);
        })
    })

以上是使用 UIExtension 将高级 webViewer 集成到您创建的工程中的主要步骤。当完成后，刷新浏览器 (<index.html>)。

此时，它就是一个功能齐全的 web PDF viewer 了。您可以根据需要浏览/编辑/注释/保护 PDF 文档。

index.html 的内容如下所示：

    <html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="./lib/UIExtension.css">
        <style>
            .fv__ui-tab-nav li span {
                color: #636363;
            }
            .flex-row {
                display: flex;
                flex-direction: row;
            }
        </style>
        <!-- ignore other unimportant code -->
    </head>
    <body>
        <div id="pdf-ui"></div>
        <script src="./lib/UIExtension.full.js"></script>
        <script>
            var licenseSN = "Your license SN";
            var licenseKey = "Your license Key";
        </script>
        <script>
            var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: './lib', // the library path of web sdk.
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: '#pdf-ui' // the div (id="pdf-ui").
            });

            // modify the file path as your need.
            fetch('/FoxitPDFSDKforWeb_DemoGuide.pdf').then(function (response) {
                response.arrayBuffer().then(function (buffer) {
                    pdfui.openPDFByFile(buffer);
                })
            })

        </script>
    </body>
    </html>

## # 集成方式

### # 作为全局变量集成

您可以将 Foxit PDF SDK for Web 作为全局变量集成到您的项目中：

    <script src="./lib/PDFViewCtrl.full.js"></script>
    <script>
    var PDFViewer = PDFViewCtrl.PDFViewer;
    var pdfViewer = new PDFViewer(…)
    </script>

示例工程，请参阅 complete_WebViewer demo。

### # 模块化集成

您可以通过模块化的方式将 Foxit PDF SDK for Web 集成到您的项目中。请参阅 integrate as module。