vue实现表格打印功能

实现表格打印的基本思路

在Vue中实现表格打印功能，通常需要结合浏览器的打印API和CSS打印样式控制。核心步骤包括准备表格数据、设计打印布局、处理打印样式隔离以及触发打印操作。

使用window.print()方法

通过调用浏览器原生window.print()方法触发打印对话框，这是最基础的打印实现方式。需要为打印内容设计专门的样式表。

<template>
  <div>
    <button @click="printTable">打印表格</button>
    <div id="printArea">
      <table>
        <!-- 表格内容 -->
      </table>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    printTable() {
      window.print();
    }
  }
}
</script>

<style>
@media print {
  body * {
    visibility: hidden;
  }
  #printArea, #printArea * {
    visibility: visible;
  }
  #printArea {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>

使用vue-print-nb插件

vue-print-nb是一个专门为Vue设计的打印插件，简化了打印区域的选择和样式控制。

安装插件：

npm install vue-print-nb --save

使用示例：

<template>
  <div>
    <button v-print="printObj">打印表格</button>
    <div id="printContent">
      <table>
        <!-- 表格内容 -->
      </table>
    </div>
  </div>
</template>

<script>
import print from 'vue-print-nb'
export default {
  directives: {
    print
  },
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '表格打印',
        extraCss: 'https://example.com/print.css'
      }
    }
  }
}
</script>

处理打印分页

对于长表格需要分页打印时，可以通过CSS控制分页行为：

@media print {
  table {
    page-break-inside: auto;
  }
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
}

打印表格的优化技巧

为获得更好的打印效果，可以考虑以下优化：

• 使用@media print媒体查询专门设置打印样式
• 隐藏不需要打印的界面元素
• 调整表格字体、边距等打印参数
• 添加页眉页脚信息
• 考虑横向打印宽表格

@media print {
  @page {
    size: A4 landscape;
    margin: 1cm;
  }
  table {
    width: 100%;
    font-size: 12pt;
  }
  .no-print {
    display: none !important;
  }
}

处理动态表格数据

对于动态生成的表格数据，确保在打印前数据已完全加载：

async printTable() {
  await this.loadTableData(); // 确保数据加载完成
  this.$nextTick(() => {
    window.print();
  });
}

打印前的预处理

可以在打印前进行一些预处理操作，如：

• 计算汇总数据并添加到表格末尾
• 高亮关键数据
• 调整列宽适应纸张

beforePrint() {
  this.addSummaryRow();
  this.adjustColumnWidths();
}