Vue怎么使用pdf-lib实现为文件流添加水印并预览

目录

1. 引言
2. pdf-lib简介
3. 项目环境搭建
4. PDF文件流的基本操作
5. 添加水印的实现
6. PDF文件的预览
7. 完整代码示例
8. 常见问题与解决方案
9. 总结

引言

在现代Web开发中，PDF文件的处理是一个常见的需求。无论是生成报告、合同，还是对现有PDF文件进行修改，开发者都需要掌握相关的技术。本文将详细介绍如何在Vue项目中使用pdf-lib库为PDF文件流添加水印，并实现预览功能。

pdf-lib简介

pdf-lib是一个功能强大的JavaScript库，用于创建和修改PDF文档。它支持在浏览器和Node.js环境中使用，提供了丰富的API来操作PDF文件，包括添加文本、图像、水印等。

主要特性

• 跨平台支持：支持浏览器和Node.js环境。
• 丰富的API：提供创建、修改、合并PDF文件的功能。
• 高性能：处理大型PDF文件时性能表现优异。

项目环境搭建

在开始之前，我们需要搭建一个Vue项目，并安装pdf-lib库。

创建Vue项目

vue create vue-pdf-watermark

安装pdf-lib

npm install pdf-lib

安装PDF预览组件

为了方便预览PDF文件，我们可以使用pdfjs-dist库。

npm install pdfjs-dist

PDF文件流的基本操作

在开始添加水印之前，我们需要了解如何使用pdf-lib处理PDF文件流。

加载PDF文件

import { PDFDocument } from 'pdf-lib';

async function loadPdf(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  const pdfDoc = await PDFDocument.load(arrayBuffer);
  return pdfDoc;
}

保存PDF文件

async function savePdf(pdfDoc) {
  const pdfBytes = await pdfDoc.save();
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  return url;
}

添加水印的实现

接下来，我们将详细介绍如何使用pdf-lib为PDF文件添加水印。

创建水印

async function addWatermark(pdfDoc, watermarkText) {
  const pages = pdfDoc.getPages();
  const font = await pdfDoc.embedFont('Helvetica-Bold');

  pages.forEach(page => {
    const { width, height } = page.getSize();
    const fontSize = 50;
    const textWidth = font.widthOfTextAtSize(watermarkText, fontSize);
    const textHeight = font.heightAtSize(fontSize);

    page.drawText(watermarkText, {
      x: (width - textWidth) / 2,
      y: (height - textHeight) / 2,
      size: fontSize,
      font: font,
      color: pdfDoc.embedRgb(0.5, 0.5, 0.5),
      opacity: 0.5,
      rotate: pdfDoc.degrees(-45),
    });
  });
}

调用添加水印函数

async function processPdf(url, watermarkText) {
  const pdfDoc = await loadPdf(url);
  await addWatermark(pdfDoc, watermarkText);
  const pdfUrl = await savePdf(pdfDoc);
  return pdfUrl;
}

PDF文件的预览

为了在Vue项目中预览PDF文件，我们可以使用pdfjs-dist库。

安装PDF预览组件

npm install pdfjs-dist

创建PDF预览组件

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist';

export default {
  props: {
    pdfUrl: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.renderPdf();
  },
  methods: {
    async renderPdf() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
      const pdf = await loadingTask.promise;
      const page = await pdf.getPage(1);

      const scale = 1.5;
      const viewport = page.getViewport({ scale });

      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      const renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      await page.render(renderContext).promise;
    },
  },
};
</script>

使用PDF预览组件

<template>
  <div>
    <PdfPreview :pdfUrl="pdfUrl" />
  </div>
</template>

<script>
import PdfPreview from './components/PdfPreview.vue';

export default {
  components: {
    PdfPreview,
  },
  data() {
    return {
      pdfUrl: '',
    };
  },
  async created() {
    this.pdfUrl = await processPdf('https://example.com/sample.pdf', 'Confidential');
  },
};
</script>

完整代码示例

以下是一个完整的Vue组件示例，展示了如何使用pdf-lib为PDF文件添加水印并预览。

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="addWatermarkAndPreview">添加水印并预览</button>
    <PdfPreview v-if="pdfUrl" :pdfUrl="pdfUrl" />
  </div>
</template>

<script>
import { PDFDocument } from 'pdf-lib';
import * as pdfjsLib from 'pdfjs-dist';
import PdfPreview from './components/PdfPreview.vue';

export default {
  components: {
    PdfPreview,
  },
  data() {
    return {
      pdfUrl: '',
      selectedFile: null,
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    async addWatermarkAndPreview() {
      if (!this.selectedFile) return;

      const arrayBuffer = await this.selectedFile.arrayBuffer();
      const pdfDoc = await PDFDocument.load(arrayBuffer);
      await this.addWatermark(pdfDoc, 'Confidential');
      const pdfBytes = await pdfDoc.save();
      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
      this.pdfUrl = URL.createObjectURL(blob);
    },
    async addWatermark(pdfDoc, watermarkText) {
      const pages = pdfDoc.getPages();
      const font = await pdfDoc.embedFont('Helvetica-Bold');

      pages.forEach(page => {
        const { width, height } = page.getSize();
        const fontSize = 50;
        const textWidth = font.widthOfTextAtSize(watermarkText, fontSize);
        const textHeight = font.heightAtSize(fontSize);

        page.drawText(watermarkText, {
          x: (width - textWidth) / 2,
          y: (height - textHeight) / 2,
          size: fontSize,
          font: font,
          color: pdfDoc.embedRgb(0.5, 0.5, 0.5),
          opacity: 0.5,
          rotate: pdfDoc.degrees(-45),
        });
      });
    },
  },
};
</script>

常见问题与解决方案

1. PDF文件加载失败

问题描述：在加载PDF文件时，可能会遇到跨域问题或文件格式不正确的问题。

解决方案：确保PDF文件的URL是正确的，并且服务器允许跨域请求。如果文件格式不正确，可以尝试重新生成PDF文件。

2. 水印显示不清晰

问题描述：添加的水印可能显示不清晰，或者位置不正确。

解决方案：调整水印的字体大小、颜色和透明度，确保水印在PDF页面上居中显示。

3. PDF预览组件无法显示

问题描述：PDF预览组件可能无法正确显示PDF文件。

解决方案：检查PDF文件的URL是否正确，并确保pdfjs-dist库已正确安装和配置。

总结

本文详细介绍了如何在Vue项目中使用pdf-lib库为PDF文件流添加水印，并实现预览功能。通过本文的学习，你应该能够掌握基本的PDF文件操作技巧，并能够在实际项目中应用这些技术。希望本文对你有所帮助，祝你在Vue开发中取得更多成果！