Print document

Foxit PDF SDK for Web supports printing through built-in UI print components or the public PDFViewer.print API. Built-in UI suits the full viewer; use PDFViewer.print when you need programmatic print, page ranges, or custom print options.

Print via built-in UI

With the UIExtension full viewer, <print:print-dialog> provides the print UI. Users open the print dialog from the toolbar or menu and complete printing from the dialog.

The default print component covers most desktop browsers. The SDK wraps the print flow internally; you usually do not handle page conversion or print jobs yourself.

Print via PDFViewer.print

PDFViewer.print is the public low-level print API. It converts specified pages to images and hands them to the browser print system, which can improve compatibility in some environments (for example iOS Safari).

const pdfViewer = await pdfui.getPDFViewer();

await pdfViewer.print({
    pages: [0, 1],
    printType: ['page', 'annot'],
    quality: 100,
    showHeaderFooter: false
}, function(message) {
    switch (message.state) {
        case 'start':
            console.log('Started generating page images');
            break;
        case 'progress':
            console.log('Page image generated', message.pageIndex, message.total);
            break;
        case 'end':
            console.log('Finished generating page images');
            break;
    }
});

Parameters

Parameter	Type	Description	Default
pages	Array<number | object>	Pages to print. A number is a page index; an object with pageIndex and rect prints a page region.	[]
printType	Array<string>	Content types: 'page', 'annot', 'stamps', 'form'.	['page']
progress	ProgressComponent | boolean	Progress UI. true or omitted uses default progress; false hides it; or pass a custom progress component.	true
quality	number	Print quality as a percentage from 100 to 1000.	100
showHeaderFooter	boolean	Show header/footer (Chrome, Firefox, Chromium Edge only).	From default print settings
printer	object	Custom printer object; rarely needed.	undefined

NOTE

Page indices in pages start at 0. For example, 0 is page 1.

Print specific pages

const pdfViewer = await pdfui.getPDFViewer();

await pdfViewer.print({
    pages: [0, 2, 4],
    printType: ['page', 'annot'],
    quality: 100
});

Print a region

To print part of a page, pass an object with rect in pages:

const pdfViewer = await pdfui.getPDFViewer();

await pdfViewer.print({
    pages: [{
        pageIndex: 0,
        rect: {
            x: 100,
            y: 100,
            width: 400,
            height: 300
        }
    }],
    printType: ['page'],
    quality: 200
});

Print current view

PDFViewer.printCurrentView() prints the currently visible area. If the view spans multiple pages, this API does not print that content.

const pdfViewer = await pdfui.getPDFViewer();

await pdfViewer.printCurrentView();

Custom progress UI

progress can be a custom object with show, hide, and updateProgress. See Progress component.

const customProgress = {
    show() {
        console.log('Show print progress');
    },
    hide() {
        console.log('Hide print progress');
    },
    updateProgress(progress) {
        console.log(`Print progress: ${progress.current}/${progress.total}`);
    }
};

await pdfViewer.print({
    pages: [0, 1, 2],
    progress: customProgress,
    quality: 150
});

Image-based printing

PDFViewer.print uses an image-based print path. Compared with the default UI flow, it can work better in some browsers, but clarity, memory, and speed depend on quality, page count, and page complexity.

For built-in <print:print-dialog>, enable image-based printing via UI Fragments—for example only on iOS Safari:

new UIExtension.PDFUI({
    appearance: UIExtension.appearances.adaptive.extend({
        getDefaultFragments() {
            return [{
                target: '@print:print-dialog',
                config: {
                    attrs: {
                        'is-image-based': PDFViewCtrl.DeviceInfo.isIOS && PDFViewCtrl.BrowserInfo.isSafari
                    }
                }
            }];
        }
    })
});

Permission restrictions

Before printing, the SDK checks whether the document allows printing. If not, PDFViewer.print throws a permission error.

try {
    await pdfViewer.print({
        pages: [0],
        printType: ['page']
    });
} catch (error) {
    console.error('Print failed', error);
}

Notes

• High quality increases browser memory use; be cautious above 300 for large documents.
• showHeaderFooter works only in Chrome, Firefox, and Chromium Edge.
• Image-based printing rasterizes pages; output may differ from the default print path.
• To print annotations, stamps, or forms, include the matching types in printType.
• Test thoroughly on mobile or browsers where compatibility matters.