Vue组件实现PDF图纸批量打印功能详解

在现代Web应用中，打印功能是一个常见的需求，尤其是在工程和设计领域，经常需要将图纸或文档打印出来。本文将介绍如何使用Vue.js实现一个简单的PDF图纸批量打印功能。

功能概述

该Vue组件的主要功能是：

1. 展示一系列图纸，每个图纸可以是一个PDF文件或图片。
2. 将每个图纸绘制到Canvas上，以便可以在浏览器中查看。
3. 提供一个打印按钮，用户点击后可以打开浏览器的打印对话框，打印所有图纸。

组件结构

以下是组件的模板部分，它包含了一个打印按钮和用于展示图纸的容器。

<template><div class="pdf-content"><button class="print-button" @click="openPrintDialog">打印图纸</button><!-- 循环展示每个图纸 --><div v-for="(obj, index) in objects" :key="index" class="print-container"><div class="print-title">{{ obj.name }}</div><canvas :ref="`canvas${index}`"></canvas></div></div>
</template>

样式设置

组件的样式部分包含了打印时的特殊样式设置，确保在打印时只显示图纸内容。

<style>
/* 默认不显示图纸容器 */
.print-container {display: none;
}
/* 图纸标题样式 */
.print-title {font-size: 28px;color: red;text-align: center;
}
/* 打印时的样式 */
@media print {.pdf-content {margin-left: -100px;}/* 隐藏不需要打印的元素 */body, html, .el-aside, .el-header, .tags, .print-button {display: none;}/* 显示图纸容器并设置分页 */.print-container {page-break-after: always;display: block;}/* 使画布填充整个容器 */canvas {width: 100%;height: 100%;}/* 重置页边距 */@page {margin: 0;}
}
</style>

JavaScript逻辑

在Vue组件的脚本部分，我们定义了数据和方法来处理图纸的加载和打印。

<script>
import { extendedArray } from "@/utils/data.js";
import { printPDF } from "@/utils/pdfToCanvas.js";
export default {data() {return {objects: extendedArray, // 包含图纸信息的数组};},mounted() {// 组件挂载后，绘制所有图纸this.objects.forEach((obj, index) => {this.drawImage(obj, index);});},methods: {async drawImage(obj, index) {// 获取Canvas元素和绘图上下文const canvas = this.$refs[`canvas${index}`][0];const ctx = canvas.getContext("2d");// 设置画布大小canvas.width = obj.backgroundImage.width;canvas.height = obj.backgroundImage.height;// 根据图纸类型绘制if (obj.backgroundImage.src.endsWith(".pdf")) {let res = await printPDF(obj.backgroundImage.src); // 将PDF转换为图片ctx.drawImage(res, 0, 0, canvas.width, canvas.height);this.loadInstrument(obj, ctx); // 加载传感器图片和文字} else {// 加载背景图片const background = new Image();background.src = obj.backgroundImage.src;background.onload = () => {ctx.drawImage(background, 0, 0, canvas.width, canvas.height);this.loadInstrument(obj, ctx);};}},loadInstrument(obj, ctx) {// 加载传感器图片和文字obj.objects.forEach((val) => {const sensor = new Image();sensor.onload = () => {ctx.drawImage(sensor, val.left, val.top);ctx.fillStyle = "black";ctx.font = "24px Arial";ctx.fillText(val.id, val.left, val.top);};sensor.src = val.src;});},openPrintDialog() {// 打开打印对话框window.print();},},
};
</script>

总结

这个Vue组件通过结合Canvas和CSS打印样式，实现了一个简单的PDF图纸打印功能。用户可以在浏览器中预览图纸，并通过打印按钮将它们打印出来。这个组件可以很容易地集成到任何Vue项目中，为用户提供便捷的打印服务。