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 Basic 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
vue
<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
vue
<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>