# # 进度条组件

## # 概述

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

## # API 预览

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

https://__API_REFERENCE_BASE_PATH__/class_p_d_f_u_i.html#aab77ea8e42199d4a8dfe8085922dca07
(opens new window)

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

https://__API_REFERENCE_BASE_PATH__/class_p_d_f_viewer.html#ac920795c9397bd637e2a609ad8e958c6
(opens new window)

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

https://__API_REFERENCE_BASE_PATH__/class_progress_component.html
(opens new window)

## # 影响范围

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

1. PDFDoc.sign
2. PDFDoc.addWatermark
3. Action: Run Form Recognition on the UI
4. PDFViewer.print
5. PDFViewer.printEx
6. 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);