« Changelog History


React PDF viewer v3.6.0 Release Notes

  • 🆕 New features

    • 🖨 Allow to choose pages when printing a document via the setPages option. Is is a function that takes the current document and returns the list of zero-based index of pages you want to print.
    import type { PdfJs } from '@react-pdf-viewer/core';
import { printPlugin } from '@react-pdf-viewer/print';

const printPluginInstance = printPlugin({
    setPages: (doc: PdfJs.PdfDocument) => number[],
});

    Here are some examples:

    // Only print the even pages
const printPluginInstance = printPlugin({
    setPages: (doc) =>
        Array(doc.numPages)
            .fill(0)
            .map((_, i) => i)
            .filter((i) => (i + 1) % 2 === 0),
});

// Only print the odd pages
const printPluginInstance = printPlugin({
    setPages: (doc) =>
        Array(doc.numPages)
            .fill(0)
            .map((_, i) => i)
            .filter((i) => (i + 1) % 2 === 1),
});

    0️⃣ The option is also available when using the default layout plugin:

    const defaultLayoutPluginInstance = defaultLayoutPlugin({
    toolbarPlugin: {
        printPlugin: {
            setPages: ...,
        },
    },
});

    🔌 You don't have to implement functions that return popular pages numbers. The print plugin provides useful functions for most popular cases:

    import {
    getAllPagesNumbers,
    getCustomPagesNumbers,
    getEvenPagesNumbers,
    getOddPagesNumbers,
} from '@react-pdf-viewer/print';

const printPluginInstance = printPlugin({
    setPages: getEvenPagesNumbers,
});
    Function Description
    getAllPagesNumbers Returns all pages numbers of the document
    getCustomPagesNumbers Returns the custom pages numbers. The input is a string consists of given pages or ranges of pages. For example:
    1, 2, 3
    1-3
    1-3, 5, 8-11
    getEvenPagesNumbers Returns even pages numbers
    getOddPagesNumbers Returns odd pages numbers
    • 🖨 The target print pages can be determined from users' input:
    import { getEvenPagesNumbers } from '@react-pdf-viewer/print';
const printPluginInstance = printPlugin();

const { setPages } = printPluginInstance;

// Show UI for users to choose pages
const handleChooseEvenPages = () => setPages(getEvenPagesNumbers);

<label>
    <input type="radio" onChange={handleChooseEvenPages} />
    Print even pages
</label>;
    • 🔌 The print plugin exposes the print function:
    import { printPlugin } from '@react-pdf-viewer/print';

const printPluginInstance = printPlugin();
const { print } = printPluginInstance;

    0️⃣ The print function is also available if you use the default layout plugin:

    import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';

const defaultLayoutPluginInstance = defaultLayoutPlugin();
const { print } = defaultLayoutPluginInstance.toolbarPluginInstance.printPluginInstance;
    • 🖨 You can customize the progress bar when preparing pages to print:
    const printPluginInstance = printPlugin({
    renderProgressBar: (numLoadedPages: number, numPages: number, onCancel: () => void) => (
        // Render the progress bar
    ),
});

    👌 Improvement

    • Replace the icons used in buttons to download and open a document with less confusing one
    import { DownloadIcon } from '@react-pdf-viewer/get-file';
import { OpenFileIcon } from '@react-pdf-viewer/open';

    🐛 Bug fix

    • Can't search or set the initial keyword for scanned documents