当前位置：首页 > VUE

vue实现表格打印

2026-02-20 06:40:33VUE

Vue 实现表格打印的方法

在 Vue 中实现表格打印功能可以通过多种方式完成，以下是几种常见的方法：

使用 window.print() 方法

通过调用浏览器的原生打印功能实现表格打印。创建一个隐藏的打印区域，将表格内容放入其中，打印完成后隐藏该区域。

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

<script>
export default {
  methods: {
    printTable() {
      const printArea = document.getElementById('printArea');
      printArea.style.display = 'block';
      window.print();
      printArea.style.display = 'none';
    }
  }
}
</script>

使用 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: '打印标题'
      }
    }
  }
}
</script>

使用 CSS 媒体查询优化打印样式

通过 CSS 媒体查询可以优化打印时的样式表现，确保打印效果符合预期。

@media print {
  body * {
    visibility: hidden;
  }
  #printArea, #printArea * {
    visibility: visible;
  }
  #printArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

使用 html2canvas 和 jsPDF 生成 PDF

如果需要将表格导出为 PDF 再打印，可以使用 html2canvas 和 jsPDF 库。

安装依赖：

npm install html2canvas jspdf --save

使用示例：

<template>
  <div>
    <button @click="exportToPDF">导出PDF并打印</button>
    <div id="tableToPrint">
      <table>
        <!-- 表格内容 -->
      </table>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export default {
  methods: {
    exportToPDF() {
      const element = document.getElementById('tableToPrint')
      html2canvas(element).then(canvas => {
        const imgData = canvas.toDataURL('image/png')
        const pdf = new jsPDF()
        pdf.addImage(imgData, 'PNG', 0, 0)
        pdf.autoPrint()
        pdf.output('dataurlnewwindow')
      })
    }
  }
}
</script>