Foxit PDF SDK For Web - V10.0.0

# 集成

本节将提供详细的教程来帮助您快速开始使用 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">
  1. 导入 "lib" 文件夹下的 "PDFViewCtrl.full.js" 库:
<script src="./lib/PDFViewCtrl.full.js"></script>
  1. 在 HTML 的 <body> 标签下，添加 <div> 作为 web viewer 容器：
<div id="pdf-viewer"></div>
  1. 初始化 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 的试用值。

  1. 打开一个 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">
  1. 导入lib 文件夹下的 "UIExtension.full.js" 库:
<script src="./lib/UIExtension.full.js"></script>
  1. 在 HTML 的 <body> 标签下，添加 <div> 作为 webViewer 容器：
<div id="pdf-ui"></div>
  1. 初始化 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 的试用值。

  1. 打开一个 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。

← 示例 →