当前位置：首页 > VUE

vue实现table打印功能

2026-02-24 16:47:51VUE

Vue 实现表格打印功能

方法一：使用浏览器原生打印 API

在 Vue 组件中创建一个打印方法，利用 window.print() 触发浏览器打印对话框。确保表格样式适配打印布局。

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

<script>
export default {
  methods: {
    printTable() {
      const printContent = document.getElementById('printArea').innerHTML;
      const originalContent = document.body.innerHTML;
      document.body.innerHTML = printContent;
      window.print();
      document.body.innerHTML = originalContent;
    }
  }
};
</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 插件，通过指令方式实现打印功能。

npm install vue-print-nb --save

在 Vue 项目中注册插件并使用：

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

模板中使用 v-print 指令：

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

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

方法三：专用打印样式表

为打印场景单独设计 CSS 样式，隐藏非必要元素，优化打印布局。

/* 打印样式 */
@media print {
  .no-print {
    display: none;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #000;
    padding: 8px;
  }
  thead {
    display: table-header-group;
  }
}

方法四：PDF 生成后打印

使用 jsPDF 和 html2canvas 库将表格转为 PDF 后打印。

npm install jspdf html2canvas

实现代码：

import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

export default {
  methods: {
    async printPDF() {
      const element = document.getElementById('printArea')
      const canvas = await html2canvas(element)
      const imgData = canvas.toDataURL('image/png')
      const pdf = new jsPDF('p', 'mm', 'a4')
      const imgWidth = 210
      const imgHeight = canvas.height * imgWidth / canvas.width
      pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight)
      pdf.autoPrint()
      window.open(pdf.output('bloburl'))
    }
  }
}