Displaying Print Preview from any 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 Vue PDF Viewer 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.

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>

Quasar Dialog

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

const visible = ref(false);
</script>
<template>
  <div>
    <button @click="visible = true">Open Dialog</button>
    <QDialog v-model:visible="visible">
      <div style="height: 600px;">
        <VPdfViewer
          src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
        />
      </div>
    </QDialog>
  </div>
</template>
<style>
@media print {
  .q-dialog .q-dialog__backdrop {
    display: none !important;
  }

  .q-dialog .q-dialog__inner {
    position: relative !important;
    display: block !important;
  }
}
</style>