React PDF viewer
v1.6.0

Example: 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 viewer-body-printing class to body. This CSS class hides all elements inside the #root element:

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

    /* Show the prepared pages */
    .viewer-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 {
    .viewer-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)