VUE---打印功能

在开发系统的时候，经常会需要将系统里面的报表进行打印，主要是要实现局部打印的功能：

插件：

npm install vue-print-nb --save

具体示例代码：

<template>
  <div>
    <button v-print="'#printArea'">打印</button>
    <div id="printArea">需要打印的内容</div>
  </div>
</template>

<script>
import Print from 'vue-print-nb';
export default {
  directives: { Print }
}
</script>

配置项：可通过 printConfig 对象设置打印参数（如页眉页脚、边距等）。

其他方法：

1、使用 jsPDF + html2canvas 生成 PDF 打印

适合需要精确控制打印内容（如复杂图表、自定义布局）的场景。

实现逻辑：
将 DOM 元素转换为 Canvas；
使用 jsPDF 将 Canvas 导出为 PDF；
触发打印或下载。

具体：

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

export default {
  methods: {
    async generatePDF() {
      const element = this.$refs.printArea;
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF('p', 'mm', 'a4');
      const imgWidth = 210; // A4 宽度
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
      pdf.save('print.pdf'); // 保存或触发打印
    }
  }
}
</script>

打完收工！