vue 纯前端预览pdf，纯前端实现pdf加水印下载文件也带水印，防止pdf下载

在现代 Web 应用中，PDF 文件的展示与处理是一个常见的需求。尤其是在一些需要保持内容安全或防止盗版的场景下，为 PDF 添加水印功能显得尤为重要。本文将探讨如何使用 Vue.js 纯前端实现 PDF 文件的预览和加水印下载功能。

一、环境准备

我们需要使用 Vue.js 来创建我们的前端应用，并利用 pdf-lib 这个库来处理 PDF 文件。首先，我们需要安装相关依赖：

npm install vue pdf-lib

二、创建 Vue 组件

我们可以创建一个 Vue 组件来实现 PDF 的上传、预览和加水印下载。以下是一个基本的示例：

<template>
  <div id="app">
    <h1>PDF 水印处理器</h1>
    <input type="file" @change="loadPdf" accept=".pdf" />
    <canvas ref="pdfCanvas"></canvas>
    <button @click="addWatermark">添加水印并下载</button>
  </div>
</template>

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

export default {
  data() {
    return {
      pdfBytes: null,
    };
  },
  methods: {
    async loadPdf(event) {
      const file = event.target.files[0];
      if (file && file.type === 'application/pdf') {
        this.pdfBytes = await file.arrayBuffer();
        this.renderPdf();
      } else {
        alert("请上传一个有效的 PDF 文件");
      }
    },

    async renderPdf() {
      const pdfDoc = await PDFDocument.load(this.pdfBytes);
      const page = pdfDoc.getPages()[0];
      const { width, height } = page.getSize();

      const canvas = this.$refs.pdfCanvas;
      canvas.width = width;
      canvas.height = height;

      const img = await pdfDoc.saveAsBase64({ dataUri: true });
      const ctx = canvas.getContext('2d');
      const imgElement = new Image();
      imgElement.onload = () => ctx.drawImage(imgElement, 0, 0);
      imgElement.src = img;
    },

    async addWatermark() {
      const pdfDoc = await PDFDocument.load(this.pdfBytes);
      const pages = pdfDoc.getPages();
      const watermarkText = '机密 - 仅限内部使用';

      pages.forEach((page) => {
        const { width, height } = page.getSize();
        page.drawText(watermarkText, {
          x: width / 2 - 50,
          y: height / 2,
          size: 50,
          color: rgb(0.75, 0.75, 0.75), // 灰色
          opacity: 0.5,
        });
      });

      const pdfWithWatermark = await pdfDoc.save();
      const blob = new Blob([pdfWithWatermark], { type: 'application/pdf' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'watermarked.pdf';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    },
  },
};
</script>

<style scoped>
#app {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
canvas {
  border: 1px solid #000;
  margin: 20px 0;
}
</style>

三、代码解析

1. 输入文件上传：我们使用了一个文件输入框，用户可以通过它上传 PDF 文件。

2. PDF 渲染：使用 pdf-lib 的 PDFDocument 类来加载用户上传的 PDF 文件，并使用 Canvas 来展示第一个页面。

3. 添加水印：在 addWatermark 方法中，我们遍历 PDF 的每一页并在页面中心位置添加指定的水印文本。可以根据需要调整水印的样式（颜色、大小、透明度等）。

4. 导出 PDF：将添加了水印的 PDF 重新生成，并创建一个下载链接以便用户下载包含水印的文件。

四、总结

通过以上步骤，我们实现了一个简单的 Vue 应用，它能够预览 PDF 文件，并支持将水印添加到 PDF 文件中后下载。这种方式不需要后端支持，因此非常适合快速开发小型应用或原型。当然，在生产环境中，仍然建议采取更加严谨的措施来保护内容，例如使用后端服务生成水印和 PDF 文件。