福昕开发者文档中心

集成 ​

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

前期准备工作 ​

创建一个新的 Web 工程 ​

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

  2. 将 SDK 包下的 lib, server, 和 external ( 如果您需要使用字体资源) 文件夹, 以及 package.json 文件拷贝到 D:/test_web。

  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)
     +-- 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>

集成基础的 webViewer ​

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

  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:

    html
    
<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>

    备注

    在 SDK 包下的 examples/license-key.js 文件中可获取 licenseSN 和 licenseKey 的试用值。

  5. 打开一个 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);
    })
})

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

    此时，它就是一个简单的 web PDF viewer 了。您可以通过右键点击页面的任何地方，然后选择放大或缩小选项来对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="./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> 标签下：

    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:

    html
    
<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>

    备注

    在 SDK 包下的 examples/license-key.js 文件中可获取 licenseSN 和 licenseKey的试用值。

  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);
    })
})

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

    此时，它就是一个功能齐全的 web PDF viewer 了。您可以根据需要浏览/编辑/注释/保护 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="./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>

集成方式 ​

作为全局变量集成 ​

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

html

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

示例工程，请参阅 complete_WebViewer demo。

模块化集成 ​

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