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

Vue.js组件开发-实现导出PDF文件可自定义添加水印及水印样式方向

article 2025/4/2 15:07:16

使用 Vue 实现导出 PDF 文件并添加水印，同时支持设置水印样式、方向和自定义水印内容。

步骤

安装依赖：使用 html2canvas 将 HTML 内容转换为 canvas，使用 jspdf 生成 PDF 文件。
创建 Vue 组件：在组件中实现水印生成、HTML 转 canvas、canvas 转 PDF 的功能。
设置水印样式和方向：支持自定义水印内容、字体、颜色、透明度、旋转角度等。
导出 PDF 文件：将带有水印的 HTML 内容导出为 PDF 文件。

详细代码及注释

<template>
  <div>
    <!-- 输入水印内容 -->
    <input v-model="watermarkText" placeholder="请输入水印内容" />
    <!-- 选择水印旋转角度 -->
    <select v-model="watermarkAngle">
      <option value="0">0°</option>
      <option value="30">30°</option>
      <option value="45">45°</option>
      <option value="60">60°</option>
      <option value="90">90°</option>
    </select>
    <!-- 导出 PDF 按钮 -->
    <button @click="exportPDF">导出 PDF</button>
    <!-- 要导出的内容 -->
    <div id="content" ref="contentRef">
      <h1>这是要导出的内容</h1>
      <p>这里可以是任意 HTML 内容。</p>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      // 水印内容
      watermarkText: '水印内容',
      // 水印旋转角度
      watermarkAngle: '45',
    };
  },
  methods: {
    // 生成水印 canvas
    generateWatermark() {
      // 创建一个新的 canvas 元素
      const canvas = document.createElement('canvas');
      // 设置 canvas 的宽度和高度
      canvas.width = 200;
      canvas.height = 100;
      // 获取 canvas 的 2D 绘图上下文
      const ctx = canvas.getContext('2d');
      // 保存当前的绘图状态
      ctx.save();
      // 设置文本对齐方式为居中
      ctx.textAlign = 'center';
      // 设置文本垂直对齐方式为中间
      ctx.textBaseline = 'middle';
      // 设置字体样式
      ctx.font = '20px Arial';
      // 设置文本颜色
      ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
      // 旋转画布
      ctx.rotate((this.watermarkAngle * Math.PI) / 180);
      // 在画布上绘制水印文本
      ctx.fillText(this.watermarkText, canvas.width / 2, canvas.height / 2);
      // 恢复之前保存的绘图状态
      ctx.restore();
      return canvas;
    },
    // 导出 PDF 文件
    async exportPDF() {
      try {
        // 生成水印 canvas
        const watermarkCanvas = this.generateWatermark();
        // 将水印 canvas 转换为 base64 格式的图片
        const watermarkImage = watermarkCanvas.toDataURL('image/png');
        // 获取要导出的内容元素
        const content = this.$refs.contentRef;
        // 使用 html2canvas 将 HTML 内容转换为 canvas
        const canvas = await html2canvas(content);
        // 获取 canvas 的宽度和高度
        const imgWidth = 210;
        const pageHeight = 295;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        let heightLeft = imgHeight;
        // 创建一个新的 PDF 对象
        const pdf = new jsPDF('p', 'mm');
        let position = 0;
        // 将 canvas 转换为图片并添加到 PDF 中
        pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, imgWidth, imgHeight);
        // 添加水印到 PDF 中
        pdf.addImage(watermarkImage, 'PNG', 50, 100, 100, 50);
        heightLeft -= pageHeight;
        // 处理超出一页的内容
        while (heightLeft >= 0) {
          position = heightLeft - imgHeight;
          pdf.addPage();
          pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight);
          pdf.addImage(watermarkImage, 'PNG', 50, 100, 100, 50);
          heightLeft -= pageHeight;
        }
        // 保存 PDF 文件
        pdf.save('exported_file.pdf');
      } catch (error) {
        console.error('导出 PDF 失败:', error);
      }
    },
  },
};
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>

使用说明

安装依赖：在项目根目录下运行以下命令安装 html2canvas 和 jspdf：

npm install html2canvas jspdf

引入组件：将上述代码保存为一个 Vue 组件文件（例如 ExportPDF.vue），然后在需要使用的地方引入并使用该组件。

<template>
  <div>
    <ExportPDF />
  </div>
</template>

<script>
import ExportPDF from './ExportPDF.vue';

export default {
  components: {
    ExportPDF,
  },
};
</script>