Foxit PDF SDK For Web - V10.0.0

# 进度条组件

# 1. 概述

WebSDK 从 9.1.0 版本开始，增加了进度条相关的API，可以用来控制和自定义进度条。

# 2. API预览

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

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

# b. PDFViewer增加了registerProgressListener方法，可以用来注册进度条监听器

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

# c. PDFViewCtrl增加导出了ProgressComponent类，可以通过PDFViewCtrl.viewerui.ProgressComponent获取

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

# 3. 影响范围

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

  1. PDFDoc.sign
  2. PDFDoc.addWatermark
  3. Action: Run Form Recognition on the UI
  4. PDFViewer.print
  5. PDFViewer.printEx
  6. PDFDoc.addPagingSealSignature

# 4. 如何使用

# a. 使用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;
}
/* ... */

# b. 使用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;
}
/* ... */

# c. 使用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);