当前位置：首页 > news >正文

VUE---打印功能

news 2026/5/12 3:39:19

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

插件：

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>