当前位置：首页 > VUE

vue实现pdf盖章

2026-01-17 17:25:23VUE

实现PDF盖章功能（Vue版）

依赖库准备 安装pdf-lib和file-saver库用于PDF处理和文件下载：

npm install pdf-lib file-saver

核心实现步骤

获取PDF文件 通过文件输入框或API获取PDF文件，转换为ArrayBuffer：

const fileInput = document.getElementById('pdf-upload');
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();

加载PDF文档 使用pdf-lib加载PDF并获取第一页：

import { PDFDocument } from 'pdf-lib';

const pdfDoc = await PDFDocument.load(arrayBuffer);
const pages = pdfDoc.getPages();
const firstPage = pages[0];

添加印章图像 准备印章图片（PNG格式），嵌入到PDF中：

const stampImage = await fetch('/stamp.png').then(res => res.arrayBuffer());
const stampPngImage = await pdfDoc.embedPng(stampImage);

定位并绘制印章 在指定位置绘制印章（示例为右下角）：

const { width, height } = firstPage.getSize();
firstPage.drawImage(stampPngImage, {
  x: width - 150, // 距右侧150px
  y: 50,          // 距底部50px
  width: 100,
  height: 100
});

保存并导出PDF 生成修改后的PDF并触发下载：

const modifiedPdf = await pdfDoc.save();
import { saveAs } from 'file-saver';
saveAs(new Blob([modifiedPdf]), 'stamped-document.pdf');

完整组件示例

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".pdf" />
    <button @click="addStamp">添加印章</button>
  </div>
</template>

<script>
import { PDFDocument } from 'pdf-lib';
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      pdfData: null
    };
  },
  methods: {
    async handleFileUpload(event) {
      this.pdfData = await event.target.files[0].arrayBuffer();
    },
    async addStamp() {
      if (!this.pdfData) return;

      const pdfDoc = await PDFDocument.load(this.pdfData);
      const stampImg = await this.loadStampImage();
      const page = pdfDoc.getPages()[0];

      page.drawImage(stampImg, {
        x: page.getWidth() - 150,
        y: 50,
        width: 100,
        height: 100
      });

      const modifiedPdf = await pdfDoc.save();
      saveAs(new Blob([modifiedPdf]), 'stamped.pdf');
    },
    async loadStampImage() {
      const response = await fetch('/stamp.png');
      return await pdfDoc.embedPng(await response.arrayBuffer());
    }
  }
};
</script>

注意事项

vue实现pdf盖章