Print from a PrimeVue Dialog

---

When printing a PDF document from a popup dialog, the print preview may appear incorrectly.

To display the print preview correctly, make sure only the Vue PDF Viewer content inside the dialog is visible and styled properly for printing.

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

Dialog Interference

The dialog mask should be hidden during printing so it does not interfere with the printed layout.

Use display: none !important; for the mask.

PrimeVue Dialog

<script setup>
import { ref } from 'vue';
import Dialog from 'primevue/dialog';
import VPdfViewer from '@vue-pdf-viewer/viewer';

const visible = ref(false);
</script>
<template>
  <div>
    <button @click="visible = true">Open Dialog</button>
    <Dialog
      v-model:visible="visible"
      modal
      header="Preview PDF"
      class="my-dialog"
      :style="{ width: '55rem', height: '55rem' }"
    >
      <template #header>
        <p :style="{ textAlign: 'center' }">Preview PDF</p>
      </template>
      <VPdfViewer
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
        :style="{ width: '100%', height: '100%' }"
      />
      <template #footer>
        <button @click="visible = false">Close</button>
      </template>
    </Dialog>
  </div>
</template>
<style>
@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 */
  }
}
</style>