Print from a PrimeReact Dialog

When printing a PDF document from a popup dialog (e.g., a modal), the print preview may unintentionally appeared incorrectly.

To display print preview correctly, you need to ensure that only the PDF content within React PDF in the dialog is shown and is styled correctly for printing.

For more details on how the print preview works, refer to Print Preview Usage.

Dialog Interference Examples

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.

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 the Vue PDF Viewer 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 */
  }
}