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包下的 "example/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

# 模块化集成

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

← 示例 →