Rendering Print Preview via Modal

Rendering Print Preview from any Dialog

When trying to print a PDF document from a popup dialog (e.g., a modal), the print layout can sometimes be blocked or appeared incorrectly because:

1. CSS Interference: The styles applied to the dialog (e.g., position: fixed, z-index, background, etc.) can interfere with the print layout.
2. Browser Behavior: Browsers may not handle printing of position: fixed or absolute elements correctly.
3. Hidden Content: Content outside the dialog (e.g., the rest of the page) might still be included in the print output.

To display print preview correctly, you need to ensure that only the content of React PDF on the dialog is printed and that it is styled correctly for printing. You can achieve this by using CSS to hide unnecessary elements and adjust the layout for printing.

Key points

1. Use @media print to control print styles:

   • Apply the @media print CSS rule to define styles specifically for printing.
   • Find the nearest ancestor selector of React PDF container to style it correctly for printing.

2. Hide the Dialog Mask:

   • The dialog mask (often a position: fixed or absolute overlay) should be hidden during printing to prevent it from interfering with the layout. Use display: none !important; for the mask.

3. Ensure Content Visibility:

   • Make the nearest ancestor of the content container visible by setting its visibility to visible and adjusting its layout for printing (e.g., removing position: fixed or absolute and ensuring it’s not clipped).

Example with PrimeReact Dialog

/* override mask style on media print*/
@media print {
  /* Hide the dialog mask */
  .p-dialog-mask {
    display: none !important;
  }
  /* Style the nearest ancestor of React PDF container */
  .p-dialog-content {
    position: relative; /* Ensure it's not fixed or absolute */
    display: block !important; /* Ensure it's visible */
    overflow: visible; /* Ensure no content is clipped */
  }
}

Workaround: Download and Print via Browser

If the printing issue still persists, alternatively, you could implement a workaround by downloading and opening a PDF file in a new tab via the browser’s native print function.

Here’s an example of how to download and open the PDF file in a new tab to print it:

JSX

import { RPProvider, RPConfig, RPDefaultLayout, RPPages } from '@pdf-viewer/react'

const src = 'https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf'

export const AppPdfViewer = () => {
  const downloadAndOpenInNewTab = async () => {
    const pdfData = await fetch(src).then((res) => res.blob())
    // Ensure the PDF file is not downloaded and opened in a new tab.
    const pdfBlob = new Blob([pdfData], { type: 'application/pdf' })
    const blobUrl = URL.createObjectURL(pdfBlob)
    window.open(blobUrl, '_blank')
  }

  return (
    <RPConfig>
      <button onClick={downloadAndOpenInNewTab}>Download and Print</button>
      <RPProvider src={src}>
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

TSX

import { RPProvider, RPConfig, RPDefaultLayout, RPPages } from '@pdf-viewer/react'

const src = 'https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf'

export const AppPdfViewer = () => {
  const downloadAndOpenInNewTab = async () => {
    const pdfData = await fetch(src).then((res) => res.blob())
    // Ensure the PDF file is not downloaded and opened in a new tab.
    const pdfBlob = new Blob([pdfData], { type: 'application/pdf' })
    const blobUrl = URL.createObjectURL(pdfBlob)
    window.open(blobUrl, '_blank')
  }

  return (
    <RPConfig>
      <button onClick={downloadAndOpenInNewTab}>Download and Print</button>
      <RPProvider src={src}>
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

Remark: As implementing the workaround is not ideal, please reach out to us if you are facing this issue.