Quasar最大化q-dialog打印无法显示全部内容问题求助

架构老林

2026-7-10

Quasar最大化对话框打印无法分页的解决办法

问题场景

环境：Vue 3、@quasar/app-vite 1.4.6（@quasar/cli 2.2.3）
测试代码：

<q-dialog maximized v-model="test">
  <q-card>
    <h1 v-for="i in 21" :key="i">hello world</h1>
  </q-card>
</q-dialog>

问题：页面内对话框内容可通过滚动条查看，但打印预览仅显示单页内容，后续内容被截断；其他页面及非最大化状态的对话框打印均正常。
已尝试无效的CSS：

height: 100% !important;
width: 100% !important;
display: inline-block;

visibility: visible;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;

解决步骤

问题根源是maximized属性会给对话框容器添加固定高度（如100vh），打印时浏览器会将固定高度的容器判定为单页，不会自动分页。只需针对打印场景重置相关样式即可：

给对话框添加自定义类名：

<q-dialog maximized v-model="test" class="print-friendly-dialog">
  <q-card>
    <h1 v-for="i in 21" :key="i">hello world</h1>
  </q-card>
</q-dialog>

添加打印专用CSS样式：

@media print {
  .print-friendly-dialog {
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    overflow: visible !important;
  }
  .print-friendly-dialog .q-card {
    height: auto !important;
    overflow: visible !important;
  }
}