当前位置：首页 > VUE

vue打印功能实现

2026-03-30 12:37:12VUE

打印功能的实现方法

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

使用window.print()方法

调用浏览器的原生打印功能是最简单的方式。创建一个打印按钮，点击时触发window.print()方法。

<template>
  <button @click="print">打印</button>
</template>

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

使用vue-print-nb插件

vue-print-nb是一个专门为Vue设计的打印插件，使用起来更加方便。

安装插件：

vue打印功能实现

npm install vue-print-nb --save

使用示例：

<template>
  <div id="printContent">
    <!-- 要打印的内容 -->
  </div>
  <button v-print="printObj">打印</button>
</template>

<script>
import print from 'vue-print-nb'

export default {
  directives: {
    print
  },
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '打印标题'
      }
    }
  }
}
</script>

自定义打印样式

有时需要隐藏某些元素或调整打印样式，可以通过CSS的@media print规则实现。

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

打印特定区域

如果只需要打印页面中的特定区域，可以创建一个隐藏的iframe来实现。

vue打印功能实现

<template>
  <button @click="printDiv">打印区域</button>
  <div id="printArea">
    <!-- 要打印的内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    printDiv() {
      const content = document.getElementById('printArea').innerHTML;
      const printWindow = window.open('', '', 'width=800,height=600');
      printWindow.document.write('<html><head><title>打印</title></head><body>');
      printWindow.document.write(content);
      printWindow.document.write('</body></html>');
      printWindow.document.close();
      printWindow.print();
    }
  }
}
</script>

使用html2canvas和jsPDF库

对于需要将HTML内容转换为PDF再打印的情况，可以使用html2canvas和jsPDF库组合。

安装依赖：

npm install html2canvas jspdf

使用示例：

<template>
  <button @click="exportToPDF">导出PDF</button>
  <div id="pdfContent">
    <!-- 要打印的内容 -->
  </div>
</template>

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

export default {
  methods: {
    exportToPDF() {
      html2canvas(document.getElementById('pdfContent')).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'PNG', 0, 0);
        pdf.save('download.pdf');
      });
    }
  }
}
</script>