如何解决Vuetify中打印时v-app-bar覆盖v-card顶部的问题

方案1：修改打印样式，调整v-app-bar定位或隐藏 #

v-app-bar默认的fixed定位会导致打印时它出现在每一页顶部，覆盖下方内容。通过媒体查询修改打印样式：

@media print {
  /* 取消固定定位，仅在第一页显示app-bar */
  .v-app-bar {
    position: static !important;
  }
  /* 重置内容区域的上边距，避免第一页内容偏移 */
  .v-main__content {
    margin-top: 0 !important;
  }
}

如果不需要打印app-bar，直接隐藏更简单：

@media print {
  .v-app-bar {
    display: none !important;
  }
}

方案2：预留页面边距+禁止卡片跨页（保留每页app-bar） #

如果需要每一页都显示app-bar，给打印页面设置顶部边距，同时避免v-card被分页截断：

@media print {
  /* 设置页面顶部边距，大小匹配app-bar高度 */
  @page {
    margin-top: 80px;
  }
  /* 禁止卡片被分页分割，避免跨页显示 */
  .v-card {
    break-inside: avoid;
  }
  /* 强制app-bar固定在打印页面顶部 */
  .v-app-bar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
  }
}

方案3：使用Vuetify的v-print指令指定打印区域 #

直接指定只打印内容区域，排除v-appBar：

<template>
  <v-app>
    <v-app-bar>页面导航栏</v-app-bar>
    <v-main ref="printTarget">
      <!-- 你的v-card列表 -->
      <v-card v-for="item in 15" :key="item" class="mb-4">
        <!-- 卡片内容 -->
      </v-card>
    </v-main>
    <v-btn v-print="printConfig">打印内容</v-btn>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const printTarget = ref(null)
const printConfig = {
  content: () => printTarget.value,
  title: '卡片列表'
}
</script>

内容的提问来源于stack exchange，提问作者sogak