vue实现a4打印模板

Vue 实现 A4 打印模板的方法

使用 CSS 设置 A4 纸张尺寸

在 Vue 项目中，可以通过 CSS 设置固定尺寸的容器来模拟 A4 纸张。A4 纸张的标准尺寸为 210mm × 297mm（或 8.27in × 11.69in）。

.a4-page {
  width: 210mm;
  height: 297mm;
  margin: 0 auto;
  padding: 20mm;
  box-sizing: border-box;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

创建 Vue 打印组件

在 Vue 单文件组件中，可以创建一个专门用于打印的模板组件。

<template>
  <div class="a4-page">
    <!-- 打印内容区域 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'A4PrintTemplate'
}
</script>

<style scoped>
.a4-page {
  /* 同上CSS样式 */
}
</style>

实现打印功能

可以使用浏览器原生的 window.print() 方法实现打印功能，同时确保打印样式正确。

methods: {
  printDocument() {
    const originalStyles = document.head.innerHTML
    const printStyles = `
      <style>
        @media print {
          body * {
            visibility: hidden;
          }
          .print-area, .print-area * {
            visibility: visible;
          }
          .print-area {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
          }
          @page {
            size: A4;
            margin: 0;
          }
        }
      </style>
    `

    document.head.innerHTML += printStyles
    window.print()
    document.head.innerHTML = originalStyles
  }
}

处理打印分页

对于多页内容，可以使用 CSS 的 page-break 属性控制分页。

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

响应式设计考虑

在非打印模式下，可以添加响应式样式确保模板在屏幕上正常显示。

@media screen {
  .a4-page {
    margin: 2rem auto;
  }
}

使用打印专用组件库

可以考虑使用专门的 Vue 打印组件库如 vue-print-nb 简化实现：

import { install as VuePrint } from 'vue-print-nb'

Vue.use(VuePrint)

// 在模板中使用
<button v-print="printOptions">打印</button>

注意事项

确保打印时隐藏不需要的元素，设置合适的打印边距。测试不同浏览器的打印兼容性，特别是 Chrome 和 Firefox 可能有不同的表现。对于复杂的打印需求，可以考虑生成 PDF 后再打印的方案。