当前位置：首页 > VUE

vue实现表格打印功能

2026-02-21 11:17:46VUE

实现表格打印的基本思路

在Vue中实现表格打印功能，通常需要将表格内容转换为适合打印的格式，并调用浏览器的打印API。以下是几种常见方法：

使用window.print()方法

创建一个隐藏的打印专用区域，将表格内容复制到该区域后触发打印。

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

    <div id="printArea" style="display:none"></div>
  </div>
</template>

<script>
export default {
  methods: {
    printTable() {
      const printArea = document.getElementById('printArea')
      const originalTable = document.getElementById('originalTable')

      printArea.innerHTML = originalTable.outerHTML

      const printWindow = window.open('', '', 'width=800,height=600')
      printWindow.document.write('<html><head><title>打印表格</title></head><body>')
      printWindow.document.write(printArea.innerHTML)
      printWindow.document.write('</body></html>')
      printWindow.document.close()
      printWindow.focus()

      setTimeout(() => {
        printWindow.print()
        printWindow.close()
      }, 500)
    }
  }
}
</script>

使用CSS媒体查询控制打印样式

通过CSS的@media print规则定义打印时的特殊样式，隐藏不需要打印的元素。

vue实现表格打印功能

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

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #000;
    padding: 8px;
  }
}

使用第三方库vue-print-nb

安装vue-print-nb库可以更简单地实现打印功能：

npm install vue-print-nb --save

在main.js中引入：

vue实现表格打印功能

import Print from 'vue-print-nb'
Vue.use(Print)

在组件中使用：

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

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

处理分页和打印优化

为长表格添加分页控制，避免内容被截断：

@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;
  }
}

打印按钮样式优化

添加打印按钮的视觉反馈：

<button @click="printTable" :disabled="isPrinting">
  {{ isPrinting ? '正在打印...' : '打印表格' }}
</button>

data() {
  return {
    isPrinting: false
  }
},
methods: {
  async printTable() {
    this.isPrinting = true
    await this.$nextTick()
    window.print()
    this.isPrinting = false
  }
}

以上方法可以根据实际需求选择或组合使用，实现Vue项目中表格的打印功能。