Foxit Developer

Progress component ​

Overview ​

Starting in version 9.1, Foxit PDF SDK for Web provides APIs to control and customize the progress indicator. See the API reference for details.

API reference ​

PDFUI constructor option ​

Customize the progress implementation with the customs.progress option:

typescript
interface ProgressComponent {
    / update  progress
    updateProgress(progress: number | { current: number, total: number }, status: string): void;

    / show progress bar
    show(coverOn: HTMLElement): void;

    / hide progress bar
    hide(): void;
}

PDFViewer listener ​

Register a progress listener with registerProgressListener:

typescript
interface ProgressListener {
    (type: string, value: number, status: string): void;
}

ProgressComponent class ​

Access the progress component class via PDFViewCtrl.viewerui.ProgressComponent.

Use cases ​

When the default progress UI appears

The built-in progress bar is shown for:

  1. PDFDoc.sign — signing
  2. PDFDoc.addWatermark — add watermark
  3. Action: Run Form Recognition — form recognition
  4. PDFViewer.print — print
  5. PDFViewer.printEx — extended print
  6. PDFDoc.addPagingSealSignature — paging seal signature

Usage example ​

Option 1: Custom PDFUI progress bar ​

html
<div id="pdf-ui"></div>
<div id="progress-bar"></div>

<style>
    #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;
    }
</style>

<script>
    const progressBar = document.getElementById('progress-bar');
    const 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';
                }
            }
        }
    });
</script>

Option 2: PDFViewer progress listener ​

html
<div id="pdf-viewer"></div>
<div id="progress-bar"></div>

<script>
    const pdfViewer = new PDFViewer({
        / 基础配置
    });
    pdfViewer.init('#pdf-viewer');

    const progressBar = document.getElementById('progress-bar');
    pdfViewer.registerProgressHandler((type, value, status) => {
        if (status === PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING) {
            progressBar.style.display = 'block';
            progressBar.innerHTML = value + '%';
        } else {
            progressBar.style.display = 'none';
        }
    });
</script>

Option 3: ProgressComponent ​

javascript
// Example 1：show basic progress
const progressComponent = new PDFViewCtrl.viewerui.ProgressComponent();
progressComponent.show(document.body);
progressComponent.updateProgress(20, PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING);

// process completed
// succeeded：progressComponent.updateProgress(null, PDFViewCtrl.constants.PROGRESS_STATUS.SUCCESS);
// failed：progressComponent.updateProgress(null, PDFViewCtrl.constants.PROGRESS_STATUS.FAIL);

// Example 2：show the current progress and total progress
const progressComponent = new PDFViewCtrl.viewerui.ProgressComponent();
progressComponent.show(document.body);
progressComponent.updateProgress(
    {current: 1, total: 4},
    PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING
);

NOTE

  • Choose the approach that fits your integration
  • ProgressComponent offers the most flexibility
  • Show progress for long-running operations to improve UX