# 进度条组件

# 概述

从 9.1.0 版本开始，Foxit PDF SDK for Web 提供了用于控制和自定义进度条的相关 API。

# API 预览

PDFUI 构造函数新增了参数 customs.progress，可以用来自定义进度条。

/docs/API_Reference/html/class_p_d_f_u_i.html#aab77ea8e42199d4a8dfe8085922dca07 (opens new window)

PDFViewer 新增了 registerProgressListener 方法，可以用来注册进度条监听器。

/docs/API_Reference/html/class_p_d_f_viewer.html#ac920795c9397bd637e2a609ad8e958c6 (opens new window)

PDFViewCtrl 新增导出了 ProgressComponent 类，可以通过 PDFViewCtrl.viewerui.ProgressComponent 获取。

/docs/API_Reference/html/class_progress_component.html (opens new window)

# 影响范围

当执行以下操作之一时，将显示默认进度条：

PDFDoc.sign
PDFDoc.addWatermark
Action: Run Form Recognition on the UI
PDFViewer.print
PDFViewer.printEx
PDFDoc.addPagingSealSignature

# 如何使用

# 使用 PDFUI 构造函数参数 `customs.progress`

<body>
    <!-- ... -->
    <div id="pdf-ui"></div>
    <div id="progress-bar"></div>
    <!-- ... -->
</body>

var progressBar = document.getElementById('progress-bar');
var pdfui = new PDFUI({
    // ...
    customs: {
        progress: class Progress {
            updateProgress(progress, status) {
                progressBar.innerText = `${progress}%`;
            }
            show(coverOn) {
                progressBar.style.display = 'block';
                progressBar.innerText = '0%';
            }
            hide() {
                progressBar.style.display = 'none';
            }
        }
    },
    // ...
});

/* ... */
#progress-bar {
    display: none;
    position: absolute;
    inset: 0;
    text-align: center;
    line-height: 100vh;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.6);
    font-size: 24px;
}
/* ... */

# 使用 PDFViewer.registerProgressListener

<body>
    <!-- ... -->
    <div id="pdf-viewer"></div>
    <div id="progress-bar"></div>
    <!-- ... -->
</body>

var pdfViewer = new PDFViewer({
    // ... 
});
pdfViewer.init('#pdf-viewer');
var progressBar = document.getElementById('progress-bar');
pdfViewer.registerProgressHandler(function (type,value,status) {
    if (status === PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING) {
        progressBar.style.display = 'block';
        progressBar.innerHTML = value + '%';
    } else {
        progressBar.style.display = 'none';
    }
});

/* ... */
#progress-bar {
    display: none;
    position: absolute;
    inset: 0;
    text-align: center;
    line-height: 100vh;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.6);
    font-size: 24px;
}
/* ... */

# 使用 PDFViewCtrl.viewerui.ProgressComponent

示例 1:

// 在合适的时机创建一个 ProgressComponent 实例
let progressComponent = new PDFViewCtrl.viewerui.ProgressComponent();
progressComponent.show(document.body);
progressComponent.updateProgress(20, PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING);
// 以成功结束
// progressComponent.updateProgress(null, PDFViewCtrl.constants.PROGRESS_STATUS.SUCCESS);
// 以失败结束
// progressComponent.updateProgress(null, PDFViewCtrl.constants.PROGRESS_STATUS.FAIL);

示例 2:

// 在合适的时机创建一个 ProgressComponent 实例 
let progressComponent = new PDFViewCtrl.viewerui.ProgressComponent();
progressComponent.show(document.body);
progressComponent.updateProgress({current: 1, total: 4}, PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING);
// 以成功结束
// progressComponent.updateProgress(null, PDFViewCtrl.constants.PROGRESS_STATUS.SUCCESS);
// 以失败结束
// progressComponent.updateProgress(null, PDFViewCtrl.constants.PROGRESS_STATUS.FAIL);

← ViewerUI 协作 (Collaboration) →