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

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

功能概述

该Vue组件的主要功能是：

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

组件结构

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

html 复制代码

<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>

样式设置

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

css 复制代码

<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组件的脚本部分，我们定义了数据和方法来处理图纸的加载和打印。

javascript 复制代码

<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项目中，为用户提供便捷的打印服务。