Print from a Quasar 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.

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>