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

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>

# Tiling size 和 zoom

Foxit PDF SDK for Web 默认以自适应宽度 (fitWidth) 的方式打开PDF文档。对于大型而简单的文档，自适应宽度缩放比例可提高渲染速度。然而，对于具有大页面和页面对象的CAD类型文档，自适应宽度可能会降低页面渲染的速度。这是因为在相同高度的viewport下，需要渲染更多的页面对象，见如下示例。对于这种类型的文档，建议通过调整页面缩放比例和tileSize来减少渲染对象，从而提高渲染速度。您可以进行测试以获得最适合实际场景的配置方案。

示例

以视觉范围800 * 600，页面对象3000 * 4000，以及tileSize 200为例，下列表格列出了在不同的缩放比例下需要渲染的页面对象的数量。

缩放 坐标空间的原点 页面对象
fitWidth 左上角 3000*2400
0.5 左上角 1600*1200
1 左上角 800*600

示例代码:

<script src="path/to/PDFViewCtrl.full.js"></script>
<script>
    var pdfviewer = new PDFViewCtrl.PDFViewer({
        ...
        defaultScale = '0.5',// or '1'
        tileSize:200,
        ...
    })
</script>

# 渲染模式

PDF高保真的特点可能会降低渲染的速度。为了平衡速度和高保真，Foxit PDF SDK for Web为部分注释和表单提供了两种渲染模式：native (保真模式) 和canvas (快速模式).

  • native: 使用WebAssembly作为渲染引擎，相对canvas渲染，其对性能的要求比较高。

  • canvas: 使用HTML canvas作为渲染引擎，在外观上存在一定的失真，但是速度快和交互性强。在大多数情况下，用户不会察觉到失真。如果您对渲染速度有比较高的要求，可以选择canvas模式。

    在大多数情况下，用户不会察觉到失真。如果您对渲染速度有比较高的要求，可以选择canvas模式。

当前，支持切换渲染模式的注释和表单部件如下所示：

  • Note
  • Highlight
  • FileAttachment
  • Sound
  • PushButton
  • RadioButton
  • CheckBox
  • TextField
  • comboBox

示例代码：

<script src="path/to/PDFViewCtrl.full.js"></script>
<script>
    var pdfviewer = new PDFViewCtrl.PDFViewer({
        ...
        annotRenderingMode:{
            highlight: 'canvas',  
            choiceButton:'canvas', 
            pushButton:'native', 
            textField:'native', 
            sound:'canvas', 
            fileAttachment:'canvas', 
            note:'canvas', 
        }
        ...
    })
</script>

# 文档加载

# 同步加载

同步加载是先获取文件的完整二进制流用于加载。这是一种在内存和性能之间折中的加载方法。对于大小在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);
}
...

← 缩略图加载错误 →