Vue中如何仅打印FullCalendar Timeline组件全部内容不含其他网页元素

实现步骤 #

• 第一步：给FullCalendar Timeline组件添加唯一标识
  在Vue模板中给组件绑定唯一ID或ref，用于后续定位DOM元素，示例：

<FullCalendar
  id="calendar-timeline"
  ref="fullCalendar"
  :plugins="[adaptivePlugin, timelinePlugin]"
  /* 其余原有配置保持不变 */
/>

• 第二步：添加打印专属样式
  在全局样式或当前Vue组件的style标签中添加打印媒体查询规则，仅保留日历内容可见，同时解除高度限制保证纵向内容完整输出：

@media print {
  /* 隐藏页面所有非目标元素 */
  body * {
    visibility: hidden;
  }
  /* 仅放行日历及内部元素 */
  #calendar-timeline, #calendar-timeline * {
    visibility: visible;
  }
  /* 日历容器占满打印页面，解除滚动限制 */
  #calendar-timeline {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto !important;
    overflow: visible !important;
  }
  /* 适配adaptivePlugin与timeline组件的滚动容器限制 */
  #calendar-timeline .fc-scrollgrid,
  #calendar-timeline .fc-scrollgrid-section,
  #calendar-timeline .fc-timeline-body {
    height: auto !important;
    overflow: visible !important;
  }
  /* 自定义打印页边距 */
  @page {
    margin: 1cm;
  }
}

• 第三步：编写打印触发方法
  在Vue的methods中添加打印函数，打印前先强制日历渲染全部纵向内容，打印完成后恢复原页面适配样式：

methods: {
  handlePrintCalendar() {
    // 获取FullCalendar实例API
    const calendarApi = this.$refs.fullCalendar.getApi()
    // 临时调整日历高度为自适应，渲染全部纵向数据
    calendarApi.updateSize({ height: 'auto' })
    // 延迟执行打印，等待组件渲染完成
    setTimeout(() => {
      window.print()
      // 打印结束后恢复日历原有自适应尺寸
      setTimeout(() => {
        calendarApi.updateSize()
      }, 100)
    }, 200)
  }
}

• 第四步：添加打印触发按钮（可选）
  在页面中添加按钮绑定上述方法即可调用打印：

<button @click="handlePrintCalendar">打印日历</button>

优化建议 #

• 若存在多页打印截断问题，可额外添加规则.fc-timeline-body tr { page-break-inside: avoid; }避免单行内容被拆分到两页
• 可自定义打印样式修改字体大小、隐藏不需要打印的操作按钮，进一步提升打印效果

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