vue实现a4打印模板

实现A4打印模板的Vue方案

使用CSS设置A4尺寸
在Vue组件的<style>中定义A4纸张的固定尺寸（210mm×297mm），并确保打印时保留边距：

@media print {
  @page {
    size: A4;
    margin: 0;
  }
  .a4-container {
    width: 210mm;
    height: 297mm;
    margin: 0 auto;
    box-shadow: none;
    background: white;
  }
}

动态内容处理
通过Vue的响应式数据绑定动态填充模板内容，例如表格或文本：

<template>
  <div class="a4-container">
    <h1>{{ title }}</h1>
    <table v-if="data.length">
      <tr v-for="(item, index) in data" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </table>
  </div>
</template>

分页控制
使用CSS的page-break属性处理跨页内容，避免元素被截断：

.page-break {
  page-break-after: always;
}

打印按钮触发
在Vue中调用浏览器原生打印API实现一键打印：

methods: {
  handlePrint() {
    window.print();
  }
}

适配复杂布局
对于多列或浮动元素，使用Flexbox或Grid布局确保打印效果：

.a4-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10mm;
}

注意事项

• 测试不同浏览器的打印预览效果，Chrome和Firefox可能存在边距差异
• 隐藏非打印元素需添加@media print { .no-print { display: none; } }
• 图片需设置max-width: 100%防止溢出页面

通过组合以上方法，可构建适配标准A4纸张的Vue打印模板，兼顾动态数据绑定与打印样式控制。