vue实现分页打印

实现分页打印的基本思路

在Vue中实现分页打印功能通常需要结合CSS的分页控制属性和JavaScript的打印API。核心是通过CSS的@media print媒体查询和page-break相关属性控制打印时的分页行为。

安装打印依赖库（可选）

如果需要更复杂的打印控制，可以安装专门的打印库如vue-print-nb：

npm install vue-print-nb --save

基础CSS分页控制

在样式文件中添加打印专用样式：

@media print {
  .page-break {
    page-break-after: always;
  }
  .no-print {
    display: none;
  }
}

Vue组件实现方案

创建可打印的组件模板：

<template>
  <div id="print-area">
    <div v-for="(page, index) in pages" :key="index" class="print-page">
      <!-- 页面内容 -->
      <h2>{{ page.title }}</h2>
      <p>{{ page.content }}</p>

      <!-- 非最后一页添加分页控制 -->
      <div v-if="index < pages.length - 1" class="page-break"></div>
    </div>

    <button @click="handlePrint">打印</button>
  </div>
</template>

JavaScript打印逻辑

在Vue组件中添加打印方法：

export default {
  data() {
    return {
      pages: [
        { title: '第一页', content: '这是第一页的内容...' },
        { title: '第二页', content: '这是第二页的内容...' }
      ]
    }
  },
  methods: {
    handlePrint() {
      const printContents = document.getElementById('print-area').innerHTML;
      const originalContents = document.body.innerHTML;

      document.body.innerHTML = printContents;
      window.print();
      document.body.innerHTML = originalContents;
    }
  }
}

使用打印库的优化方案

如果使用vue-print-nb库：

import Print from 'vue-print-nb'

Vue.use(Print);

// 模板中使用
<button v-print="'#print-area'">打印</button>

动态内容分页处理

对于动态内容需要计算分页的情况：

function paginateContent(content, itemsPerPage) {
  const pages = [];
  for (let i = 0; i < content.length; i += itemsPerPage) {
    pages.push(content.slice(i, i + itemsPerPage));
  }
  return pages;
}

打印样式优化建议

• 使用@page规则设置页边距

  @page {
  size: A4;
  margin: 1cm;
  }

• 隐藏不需要打印的元素

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

注意事项

打印预览在不同浏览器中表现可能不一致，建议在目标浏览器中进行测试。对于复杂表格分页，可能需要额外计算行高来确定分页位置。