电子文档的 PDF 预览和加水印——Vue 集成 PDF.js 的简洁实现

Vue 集成 PDF.js 实现 PDF 预览和添加水印

在当今的数字时代，处理和管理电子文档已成为我们日常生活的重要组成部分。PDF（便携式文档格式）作为一种广泛使用和认可的文档格式，以其跨平台兼容性和保真度而备受青睐。为了便于浏览和交互，我们可以将 PDF 集成到网页中，实现预览和添加水印等功能。

PDF.js 简介

PDF.js 是一个开源的 JavaScript 库，用于渲染和显示 PDF 文档。它完全独立于任何特定的后端或服务器端技术，因此可以在任何现代 Web 浏览器中使用。PDF.js 提供了一个完整的功能集，包括页面渲染、缩放、旋转、搜索、打印和注释等。

Vue 集成 PDF.js

Vue 是一个流行的 JavaScript 框架，用于构建用户界面。它以其简洁性、灵活性、可扩展性和响应式设计而著称。我们可以将 PDF.js 与 Vue 集成，轻松实现 PDF 预览和添加水印功能。

实现步骤

1. 安装 PDF.js 库

npm install pdfjs-dist

2. 在 Vue 组件中导入 PDF.js

import pdfjsLib from 'pdfjs-dist';

3. 创建一个用于显示 PDF 预览的 Vue 组件

<template>
  <div>
    <canvas id="pdf-canvas" ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取 PDF 文档
    pdfjsLib.getDocument('path/to/document.pdf').then((pdf) => {
      // 获取第一页
      pdf.getPage(1).then((page) => {
        // 渲染页面到画布上
        const viewport = page.getViewport({ scale: 1.5 });
        const canvas = this.$refs.canvas;
        const context = canvas.getContext('2d');
        const renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
      });
    });
  }
};
</script>

4. 创建一个用于添加水印的 Vue 组件

<template>
  <div>
    <canvas id="pdf-canvas" ref="canvas"></canvas>
    <input type="text" v-model="watermark" />
    <button @click="addWatermark">添加水印</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      watermark: ''
    };
  },
  mounted() {
    // 获取 PDF 文档
    pdfjsLib.getDocument('path/to/document.pdf').then((pdf) => {
      // 获取第一页
      pdf.getPage(1).then((page) => {
        // 渲染页面到画布上
        const viewport = page.getViewport({ scale: 1.5 });
        const canvas = this.$refs.canvas;
        const context = canvas.getContext('2d');
        const renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);

        // 添加水印
        context.font = '20px Arial';
        context.fillStyle = 'red';
        context.fillText(this.watermark, 100, 100);
      });
    });
  },
  methods: {
    addWatermark() {
      // 获取画布上的数据
      const dataURL = this.$refs.canvas.toDataURL();

      // 下载水印后的 PDF 文档
      const link = document.createElement('a');
      link.href = dataURL;
      link.download = '水印文档.pdf';
      link.click();
    }
  }
};
</script>

总结

通过将 Vue 与 PDF.js 集成，我们可以轻松实现 PDF 预览和添加水印等功能。PDF.js 提供了丰富的功能集，可以满足各种 PDF 处理需求，而 Vue 则使我们能够快速构建交互式用户界面。这种集成方式不仅简单高效，而且可以帮助我们创建功能强大的 PDF 处理应用。