Hide unnecessary elements when printing a document

Behind the scenes, when you click the Print button in the toolbar, React PDF Viewer prepares the pages and executes the `window.print()` function.

This function prints the entire web page which also includes all elements on the page. The question is how React PDF Viewer hides the elements except the prepared pages?

In print mode, the viewer adds the `rpv-print__body-printing` class to `body`. This CSS class hides all elements inside the `#root` element:

@media print {
    /* Hide all elements inside #root */
    .rpv-print__body-printing #root {
        display: none;
    }

    /* Show the prepared pages */
    .rpv-print__zone {
        display: block;
    }
}

Since we usually use the `id="root"` attribute for the root element of our React application, this approach works in most cases.

It can't cover cases where

the root element doesn't use the `id="root"` attribute
the viewer is opened inside a modal
etc.

In those cases, we have to add more styles to hide the unnecessary elements. For example, assume that the viewer is opened inside a modal which has the class of `example-modal`:

<div class="example-modal">
    <!-- Modal header -->
    ...

    <!-- Modal body -->
    <div style={{ overflow: 'auto' }}>
        <Viewer fileUrl="/path/to/document.pdf" />
    </div>
</div>

then the modal must be hidden when printing the document:

@media print {
    .rpv-print__body-printing .example-modal {
        display: none;
    }
}

Click the Open modal button below, and then click the Print button in the toolbar to see it in action.

(The sample code)

Hide unnecessary elements when printing a document

See also