当前位置：首页 > VUE

vue实现a4打印模板

2026-01-07 06:56:48VUE

使用Vue实现A4打印模板

在Vue中实现A4打印模板需要结合CSS的打印样式和Vue的模板渲染能力。以下是具体实现方法：

设置A4纸张尺寸

在CSS中定义A4纸张的标准尺寸（210mm × 297mm）和边距：

@media print {
  @page {
    size: A4;
    margin: 0;
  }
  body {
    width: 210mm;
    height: 297mm;
    margin: 0 auto;
  }
}

创建Vue打印组件

创建一个可复用的打印组件模板：

<template>
  <div class="a4-container">
    <div class="a4-content">
      <!-- 这里放置你的打印内容 -->
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.a4-container {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.a4-content {
  padding: 15mm;
  height: calc(297mm - 30mm);
  overflow: hidden;
}

@media print {
  .a4-container {
    box-shadow: none;
    page-break-after: always;
  }
}
</style>

实现打印功能

添加打印按钮和对应的打印方法：

<template>
  <div>
    <button @click="printDocument">打印</button>
    <A4PrintTemplate ref="printContent">
      <!-- 自定义打印内容 -->
      <h1>打印标题</h1>
      <p>打印内容...</p>
    </A4PrintTemplate>
  </div>
</template>

<script>
export default {
  methods: {
    printDocument() {
      const printContent = this.$refs.printContent.$el.innerHTML;
      const originalContent = document.body.innerHTML;

      document.body.innerHTML = printContent;
      window.print();
      document.body.innerHTML = originalContent;

      // 重新渲染Vue应用
      window.location.reload();
    }
  }
}
</script>

处理分页问题

对于多页内容，使用CSS控制分页：

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

.no-break {
  page-break-inside: avoid;
}

优化打印样式

添加打印专用的样式表，隐藏不需要打印的元素：

@media print {
  .no-print {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }
}

使用PDF生成库（可选）

如果需要生成PDF而不仅仅是打印，可以集成jsPDF等库：

import jsPDF from 'jspdf';

generatePDF() {
  const doc = new jsPDF({
    orientation: 'portrait',
    unit: 'mm',
    format: 'a4'
  });

  const content = this.$refs.printContent.$el;
  doc.html(content, {
    callback: function(doc) {
      doc.save('document.pdf');
    },
    x: 10,
    y: 10,
    width: 190, // A4宽度减去边距
    windowWidth: 800
  });
}

以上方法提供了从基础打印到PDF生成的完整解决方案，可以根据实际需求进行调整和扩展。

vue实现a4打印模板