Foxit PDF SDK For Web - V10.0.0

# 最佳实践

Foxit PDF SDK for Web 在网络环境的浏览器的沙盒中运行。选择正确的网站操作方案和 Foxit PDF SDK for Web 配置方案可以提高 Foxit PDF SDK for Web 的运行速度。本节将提供有关网站操作优化和 Foxit PDF SDK for Web 配置的参考说明。

# 网站资源优化

# Gizp 和 Brotli 压缩

压缩可以缩小资源体积大小和减少下载时间。下列表格显示了在 UIExtension.css 和 UIExtension.full.js 上使用 gzip 和 brotil 压缩后的大小。

文件 原始大小 Gzip 压缩后的大小 Brotli 压缩后的大小
UIExtension.css 1.2M 213kb 156kb
UIExtension.full.js 2.6M 534kb 443kb

备注: 虽然 Google 提供的 brotli 压缩算法在压缩率上比 gzip 更有优势，但是 brotli 并非所有浏览器都原生支持，比如微软的 IE 浏览器。IE 中 brotli 的解压需要使用 JavaScript 引擎。这种耗时的过程抵消了 brotli 的优势，并降低了网站的加载性能。

# Cache

缓存资源文件可以避免反复下载相同的资源。建议将 SDK 包中的 /lib 库和 /external 字体文件作为前端缓存。需要了解更多信息，请查阅 Google (opens new window) 和 Mozilla (opens new window) 的 HTTP 缓存。

# Foxit PDF SDK for Web 配置

# 只读模式

如果您当前的需求如以下场景，建议您以只读方式加载 Foxit PDF SDK for Web，从而提高渲染性能。

应用场景：

  • 由 CAD 生成的复杂的 PDF 文档
  • 页面渲染速度要求高
  • 不需要对页面进行编辑

示例代码：

<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({
        ...
        viewerOptions:{
            customs: {
                getDocPermissions: function () {
                    return 0;// 0 means ReadOnly 
                }
            }
        ...
    })
</script>

或者

<script src="path/to/PDFViewCtrl.full.js"></script>
<script>
    var pdfviewer = new PDFViewCtrl.PDFViewer({
        ...
        customs: {
                getDocPermissions: function () {
                    return 0;// 0 means ReadOnly 
                }
            }
        ...
    })
</script>

# Brotli 压缩

Foxit PDF SDK for Web 的核心是由 emscripten 编译的 wasm/asm 模块。其体积大小分别为 8M/13M，加载所需消耗的时间取决于浏览器的性能。wasm/asm 模块默认使用 brotli 压缩，但是 brotli 并非所有浏览器都原生支持，比如微软的 IE 浏览器，访问 https://caniuse.com/#search=brotli (opens new window) 可以查看支持 brotli 的浏览器。IE 中 brotli 的解压需要使用浏览器的 JavaScript 引擎。此过程比较耗时，可能会抵消了 brotli 的优势，并导致性能损失。

建议您在测试环境中通过启用和禁用 brotli 来选择最合适的配置。

示例代码：

<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({
        ...
        viewerOptions:{
             jr: {
                brotli: {
                    core: false // true 表示开启 brotli 压缩，false 表示禁用 brotli 压缩，默认值为 true。
                }
            }
        }
        ...
    })
</script>

或者

<script src="path/to/PDFViewCtrl.full.js"></script>
<script>
    var pdfviewer = new PDFViewCtrl.PDFViewer({
        ...
        jr: {
                brotli: {
                    core: false // true 表示开启 brotli 压缩，false 表示禁用 brotli 压缩，默认值为 true。
                }
            }
        ...
    })
</script>

# 预加载 webassembly 产物

从 7.1.1 版本开始，Foxit PDF SDK for Web 提供了一个脚本文件 "preload-jr-worker.js"，用来提前加载 webWorker 脚本以及 wasm/asm，以便更大程度的节省文档渲染的时间。

示例代码:

<body>
    <div id="pdf-ui"></div>
    <script>
        var licenseSN = "Your license SN";
        var licenseKey = "Your license Key";
    </script>

    <!-- Add the preload-jr-worker.js-->
    <script src="./lib/preload-jr-worker.js"></script>
    <script>
        var readyWorker = preloadJrWorker({
            workerPath: './lib/',
            enginePath: './lib/jr-engine/gsdk',
            fontPath: './external/brotli',
            licenseSN: licenseSN,
            licenseKey: licenseKey
        })
    </script>

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

        var pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: './lib', // the library path of web sdk.
                jr: {
                    readyWorker: readyWorker,
                }
            },
            renderTo: '#pdf-ui', // the div (id="pdf-ui").
            appearance: UIExtension.appearances.adaptive,
            addons: [
                '```'
            ]
        });
        ...

# Tiling size

备注：从 8.5 版本开始，Web SDK 已不再使用 tileSize 渲染模式。以下内容仅适用于 8.5 之前的版本。

Foxit PDF SDK for Web 在渲染页面时，会进行光栅扫描。如果当前渲染页面太大，那么页面渲染速度将会非常慢。在打开大页面时，建议启用 tileSize 渲染模式。当前，支持的 tileSize 范围为 500-3000px。在我们的内部综合测试中，当 tileSize 设置为 1200px 时，渲染速度是最优的。但其可能因文档复杂度而不同。您可以根据实际场景的需求在测试环境中设置不同的 tileSize，如 200，3600 等，以获得最合适的配置方案。

适用场景:

  • 具有大页面的复杂文档

示例代码：

<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({
        ...
        viewerOptions:{
            tileSize:1200,
            ...
        }
        ...
    })
</script>

或者

<script src="path/to/PDFViewCtrl.full.js"></script>
<script>
    var pdfviewer = new PDFViewCtrl.PDFViewer({
        ...
        tileSize:1200,
        ...
    })
</script>

# Zoom

对于桌面端，Foxit PDF SDK for Web 默认以自适应宽度 (fitWidth) 的方式打开 PDF 文档。对于移动端，则默认以实际比例的方式打开 PDF 文档。如果以 fitWidth 的模式展示页面，显示或隐藏左侧工具栏时会导致 PDF 页面跟随视窗大小改变而被重新渲染，从而影响性能。为了规避这个问题，建议以实际比例的方式展示页面。

# 渲染模式

从 8.5 版本开始，annotRenderingMode 已被废弃。 默认情况下，Foxit PDF SDK for Web 使用 native 模式（使用 WebAssembly 作为渲染引擎）来渲染注释和表单控件。当前，native 渲染模式已进行了显著优化，可以确保渲染质量和速度，因此不再需要 canvas 渲染模式。

# 文档加载

# 同步加载

同步加载是先获取文件的完整二进制流用于加载。这是一种在内存和性能之间折中的加载方法。对于大小在 50M 至 500M 之间的文档，建议使用同步加载。

示例代码:

<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({...})
    var blob = getBlob();
    pdfui.openPDFByFile(blob)
</script>

# 异步加载

异步加载不需要完整的文件流，仅在加载时获取对应的部分。当文件过大 (超过500MB) ，无法全部放于内存时，或者当一次仅需要使用文档部分内容时，建议使用此方式来加载文档，以获得良好的性能体验。

示例代码:

<script src="path/to/UIExtension.full.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({...})
    pdfui.openPDFByHttpRangeRequest({
        range:{
            url:'../../../docs/FoxitPDFSDKforWeb_DemoGuide.pdf',
        }
    })
</script>

# 从内存 arrayBuffer 加载文档

从 arrayBuffer 加载是将整个文件流存储于 wasm/asm 内存，并且从该内存加载。对于本地的小文档 (大小低于 500MB) ，或者可短时间内获取到整个文档流时，建议使用此方法来加载文档。该方法具有读取效率高和加载速度快的优势。启用该方法，则需要在构造函数 PDFUI 时，传入 getLoadingMode() 回调函数，当返回值为 1 则表示使用内存 arrayBuffer 加载文档。

示例代码:

<script src="path/to/UIExtension.full.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({
        ...
        customs:{
            getLoadingMode:function(file){return 1}
        }
        ...
    })
</script>

如果用户实现了自己的 file open control，则使用如下方式加载：

var pdfui = new UIExtension.PDFUI({...})
...//event bind context
{
    var arrayBuffer=getArrayBuffer();
    pdfui.openPDFByFile(arrayBuffer);
}
...

← 国际化词条资源管理 →