vue实现pdf盖章
实现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>注意事项
- 印章图片建议使用透明背景的PNG格式
- 坐标系统原点(0,0)位于页面左下角
- 对于多页PDF需要遍历所有页面进行处理
- 服务端渲染场景需将文件操作放在客户端生命周期钩子中
