移动端打印Vuetify开发的Vue组件时如何强制采用A4尺寸

核心原因 #

Vuetify的响应式断点默认基于当前设备的视口宽度判断，移动端视口宽度不足会触发xs/sm等移动端断点，打印时默认继承当前视口的断点规则，不会适配A4纸张尺寸。

配置步骤 #

1. 覆写打印场景下的Vuetify断点逻辑 #

打印触发时强制指定断点为桌面端规格，打印完成后恢复原断点：

// Vue2 + Vuetify2 场景，在根组件或Vuetify初始化文件中添加
export default {
  mounted() {
    const vuetify = this.$vuetify
    // 备份原始断点配置
    const originalBreakpoint = { ...vuetify.breakpoint }
    
    // 监听系统打印事件
    window.addEventListener('beforeprint', () => {
      // 强制设置为桌面端lg断点，可替换为你项目的桌面端断点标识
      vuetify.breakpoint.name = 'lg'
      // 宽度值对应lg断点的阈值，自定义断点可修改为对应数值
      vuetify.breakpoint.width = 1264
      vuetify.breakpoint.lg = true
      // 关闭移动端断点标识
      vuetify.breakpoint.xs = false
      vuetify.breakpoint.sm = false
      vuetify.breakpoint.md = false
    })

    // 打印完成后恢复原始断点
    window.addEventListener('afterprint', () => {
      Object.assign(vuetify.breakpoint, originalBreakpoint)
    })
  }
}

如果是Vue3 + Vuetify3 场景，通过useVuetify()获取Vuetify实例后执行相同逻辑即可。

2. 添加打印专用全局CSS #

强制指定打印页面尺寸为A4，固定渲染宽度匹配桌面端断点：

@media print {
  /* 指定A4纸张规格，横屏可把portrait改为landscape */
  @page {
    size: A4 portrait;
    margin: 1cm;
  }

  body {
    /* 固定渲染宽度匹配桌面端断点，避免移动端视口影响 */
    width: 1264px !important;
    margin: 0 auto;
    /* 可根据实际渲染效果调整缩放值，避免内容溢出 */
    zoom: 0.8;
  }

  /* 可选：隐藏不需要打印的元素，只需给对应元素加no-print类名 */
  .no-print {
    display: none !important;
  }
}

3. 可选：自定义打印按钮适配 #

如果是通过页面内按钮触发打印，可手动控制断点更新时机，避免渲染延迟导致的样式异常：

// 打印按钮点击事件
handlePrint() {
  // 先强制更新为桌面端断点
  this.$vuetify.breakpoint.name = 'lg'
  this.$vuetify.breakpoint.width = 1264
  // 等待视图更新完成后触发打印
  this.$nextTick(() => {
    setTimeout(() => window.print(), 100)
  })
}

完成以上配置后，打印时会强制采用桌面端断点的样式规则渲染组件，适配A4纸张尺寸。

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