vue 添加水印并预览pdf

实现方法
在 Vue.js 中实现给 PDF 文件添加水印并进行在线预览主要依赖于 pdfjs-dist 和 pdf-lib 库。前者用于解析和渲染 PDF 文档，后者则提供了操作 PDF 的能力，包括向文档中嵌入文字或图像作为水印。
对于集成 pdfjs-dist 来说，在现代的 JavaScript 项目里推荐采用 ES Module 方式的引入方式来代替 CommonJS 模块加载语法[^2]：
import * as pdfjsLib from 'pdfjs-dist';
// 如果需要支持更多特性可以继续导入对应的 CMap 资源包
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'; // 加载 worker 线程脚本

为了能够处理 PDF 并在其上绘制水印，则需要用到 pdf-lib 这样的工具库[^3]:
import { PDFDocument } from "pdf-lib";
async function addWatermarkToPdf(file: File): Promise<Uint8Array> {
let pdfDoc = await PDFDocument.load(await file.arrayBuffer());

// 设置全局透明度和其他样式属性...
for (let i = 0; i < pdfDoc.getPages().length; ++i) {
const page = pdfDoc.getPage(i);

// 定义水印位置、旋转角度等参数后调用 drawText 方法完成绘制工作
// ...
}

return await pdfDoc.save();
}

当完成了上述准备工作之后就可以创建一个简单的组件来进行实际的操作了。这个组件会接收上传的 PDF 文件对象并通过上面提到的技术栈对其进行加工最后展示出来。
<!-- template -->
<div>
<!-- 提供文件输入框让用户选择要打开的 PDF 文件 -->
<input type="file" @change="handleFileChange"/>

<!-- 显示经过处理后的 PDF 页面缩略图列表 -->
<div v-if="pages.length">
<canvas
:width="page.viewport.width"
:height="page.viewport.height"
v-for="(page, index) of pages"
:key="index"
ref="canvases"
></canvas>
</div>
</div>

<script lang="ts">
export default defineComponent({
data() {
return {
pages: [],
canvases: null,
};
},
methods: {
async handleFileChange(event:Event){
const inputElement = event.target as HTMLInputElement;
if (!inputElement.files?.length) return;

try{
this.pages=[];
const processedPdfData=await addWatermarkToPdf(inputElement.files[0]);
const loadingTask = pdfjsLib.getDocument(processedPdfData);

const doc = await loadingTask.promise;
for(let pageNumber=1 ;pageNumber<=doc.numPages;++pageNumber){
const page=await doc.getPage(pageNumber);

// 将每一页的内容画到 canvas 上面去显示它
const viewport = page.getViewport({ scale: 1 });
/* ... */
}

this.$nextTick(() => {
// 更新页面视图逻辑...
});

}catch(error){
console.error('Error processing the document:', error);
}

}
}
});
</script>

通过这种方式可以在不借助服务器端的情况下实现在浏览器环境中对 PDF 文件施加特定样式的水印标记并且即时呈现修改过的结果给用户查看[^1]。