福昕开发者文档中心

集成 SDK ​

本节将提供详细的教程来帮助您使用福昕 PDF SDK (Web) 版快速实现一个基础的 PDF 阅读器和一个功能完整的 PDF 阅读器。

前期准备工作 ​

创建一个新的 Web 工程 ​

  1. 创建一个新的目录作为工程目录，比如 D:/test_web。

  2. 将 SDK 包下的 lib、server、和 external（如果您需要使用字体资源）文件夹，以及 package.json 文件拷贝到 D:/test_web。为便于按本文示例加载试用授权，请同时将 examples 目录（至少包含其中的 license-key.js）拷贝到工程目录。

  3. 拷贝一个 PDF 文件到 D:/test_web，比如 docs 文件夹下的 demo 手册。

  4. 在 D:/test_web 文件夹下创建一个html 文件 index.html。则 test_web 目录如下所示：

    text
    test_web
     +-- lib          (copy from the SDK package)
     +-- server       (copy from the SDK package)
     +-- examples     (copy from the SDK package; at least license-key.js for trial license)
     +-- package.json (copy from the SDK package)
     +-- index.html

    index.html的内容如下所示:

    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>

    完整示例，请参阅随包发布的 examples/PDFViewCtrl/basic_WebViewer 。

集成基础 Viewer（PDFViewCtrl） ​

本节主要介绍如何在上述 创建的web工程 中基于 PDFViewCtrl 集成功能基础的 PDF 阅读器。

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

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

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

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

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

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

  4. 初始化 PDFViewCtrl（在创建实例时通过 jr 传入授权信息；若已按步骤 2 引入 PDFViewCtrl.full.js，此处仅需补充以下脚本）：

    html
    <script src="./examples/license-key.js"></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>

说明

试用包中的 examples/license-key.js 已导出 licenseSN 与 licenseKey。正式环境请勿将明文授权提交到公开仓库；若需在服务端加密后再下发前端，请使用 server/license-protect 生成保护授权并通过 jr.l 传入。完整说明见 试用与授权。

  1. 打开一个 PDF 文档：

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

当完成后，刷新浏览器。此时，它就是一个简单的 PDF 阅读器了。您可以通过右键点击页面的任何地方，然后选择放大或缩小选项来对PDF文档进行放大/缩小。

index.html 的内容如下所示：

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="./examples/license-key.js"></script>
<script src="./lib/PDFViewCtrl.full.js"></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>

集成完整 UI 的 PDF 阅读器（UIExtension） ​

本节将在 创建的web工程 的基础上，介绍如何基于 UIExtension 集成功能完整的 PDF 阅读器。

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

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

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

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

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

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

  4. 初始化 UIExtension（在 viewerOptions.jr 中传入与 PDFViewCtrl 相同的授权配置；若已按步骤 2 引入 UIExtension.full.js，此处仅需补充以下脚本）：

    html
    <script src="./examples/license-key.js"></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>

    说明

    试用授权来源与 jr.l 保护授权方式与上一节相同，详见 试用与授权。

  5. 打开一个 PDF 文档:

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

    当完成后，刷新浏览器。此时，它就是一个功能完整的 PDF 阅读器了。您可以根据需要浏览/编辑/注释/保护 PDF 文档。

    index.html 的内容如下所示：

    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="./examples/license-key.js"></script>
<script src="./lib/UIExtension.full.js"></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>

    完整示例，请参阅随包发布的 examples/UIExtension/complete_WebViewer 。

集成方式 ​

作为全局变量集成 ​

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

html
<script src="./examples/license-key.js"></script>
<script src="./lib/PDFViewCtrl.full.js"></script>
<script>
    var PDFViewer = PDFViewCtrl.PDFViewer;
    var pdfViewer = new PDFViewer({
        libPath: './lib',
        jr: {
            licenseSN: licenseSN,
            licenseKey: licenseKey
        }
    });
</script>

作为全局变量集成时，同样须在构造参数中传入 jr 授权信息；更多说明见 试用与授权。

示例工程，请参阅随包发布的 examples/UIExtension/complete_WebViewer 。

模块化集成 ​

您可以通过模块化的方式将 SDK 集成到您的项目中。请参阅随包发布的 examples/UIExtension/integrate-as-module/示例。