基于PDF.js的安全PDF预览组件实现：从虚拟滚动到水印渲染

2026年1月9日 10:26

基于PDF.js的安全PDF预览组件实现：从虚拟滚动到水印渲染

本文将详细介绍如何基于Mozilla PDF.js实现一个功能完善、安全可靠的PDF预览组件，重点讲解虚拟滚动、双模式渲染、水印实现等核心技术。

前言

在Web应用中实现PDF预览功能是常见需求，尤其是在线教育、文档管理等场景。然而，简单的PDF预览往往无法满足实际业务需求，特别是在安全性方面。本文将介绍如何基于PDF.js实现一个功能完善的PDF预览组件，并重点讲解如何添加自定义防下载和水印功能，为文档安全提供保障。

功能概览

我们的PDF预览组件实现了以下核心功能：

基础功能：PDF文件加载与渲染、自定义尺寸控制、页面缩放规则配置、主题切换
安全增强：动态水印添加、防下载功能、右键菜单禁用、打印控制
用户体验：页面渲染事件通知、响应式布局适配、加载状态反馈

技术实现

1. 虚拟滚动加载

对于大型PDF文件，一次性渲染所有页面会导致严重的性能问题。我们通过虚拟滚动技术优化大文档的加载性能，只渲染当前可见区域和附近的页面：

// 页面缓存管理
class PDFPageViewBuffer {
  #buf = new Set();
  #size = 0;

  constructor(size) {
    this.#size = size;  // 缓存页面数量限制
  }

  push(view) {
    const buf = this.#buf;
    if (buf.has(view)) {
      buf.delete(view);
    }
    buf.add(view);
    if (buf.size > this.#size) {
      this.#destroyFirstView();  // 超出限制时销毁最早的页面
    }
  }
}

优势：

内存优化：只保留有限数量的页面在内存中
性能提升：减少不必要的渲染操作
流畅体验：滚动时动态加载页面

2. 双模式渲染：Canvas与HTML

PDF.js支持两种渲染模式，可根据不同需求选择。两种渲染方式在视觉效果和性能上有明显差异：

在这里插入图片描述

图：HTML渲染模式下的PDF显示效果

在这里插入图片描述

图：Canvas渲染模式下的PDF显示效果

Canvas渲染（默认）

// 创建Canvas元素
const canvas = document.createElement("canvas");
canvas.setAttribute("role", "presentation");

// 获取2D渲染上下文
const ctx = canvas.getContext("2d", {
  alpha: false,           // 禁用透明度通道，提高性能
  willReadFrequently: !this.#enableHWA  // 根据硬件加速设置优化
});

// 渲染PDF页面到Canvas
const renderContext = {
  canvasContext: ctx,
  transform,
  viewport,
  // 其他参数...
};
const renderTask = pdfPage.render(renderContext);

HTML渲染

// HTML渲染模式（文本层）
if (!this.textLayer && this.#textLayerMode !== TextLayerMode.DISABLE) {
  this.textLayer = new TextLayerBuilder({
    pdfPage,
    highlighter: this._textHighlighter,
    accessibilityManager: this._accessibilityManager,
    enablePermissions: this.#textLayerMode === TextLayerMode.ENABLE_PERMISSIONS,
    onAppend: (textLayerDiv) => {
      this.#addLayer(textLayerDiv, "textLayer");
    }
  });
}

两种模式对比：

特性	Canvas渲染	HTML渲染
性能	高	中等
文本选择	不支持	支持
缩放质量	高	中等
内存使用	高	低
兼容性	好	极好

3. 水印渲染实现

水印是保护文档版权的重要手段。我们在PDF页面渲染完成后，直接在Canvas上添加水印，确保水印与内容融为一体：

// 在渲染完成后添加水印
const resultPromise = renderTask.promise.then(async () => {
  showCanvas?.(true);
  await this.#finishRenderTask(renderTask);

  // 添加水印
  createWaterMark({ fontText: warterMark, canvas, ctx });

  // 其他处理...
});

// 水印绘制函数
function createWaterMark({
  ctx,
  canvas,
  fontText = '默认水印',
  fontFamily = 'microsoft yahei',
  fontSize = 30,
  fontcolor = 'rgba(218, 218, 218, 0.5)',
  rotate = 30,
  textAlign = 'left'
}) {
  // 保存当前状态
  ctx.save();

  // 计算响应式字体大小
  const canvasW = canvas.width;
  const calfontSize = (fontSize * canvasW) / 800;
  ctx.font = `${calfontSize}px ${fontFamily}`;
  ctx.fillStyle = fontcolor;
  ctx.textAlign = textAlign;
  ctx.textBaseline = 'Middle';

  // 添加多个水印
  const pH = canvas.height / 4;
  const pW = canvas.width / 4;
  const positions = [
    { x: pW, y: pH },
    { x: 3 * pW, y: pH },
    { x: pW * 1.3, y: 3 * pH },
    { x: 3 * pW, y: 3 * pH }
  ];

  positions.forEach((pos) => {
    ctx.save();
    ctx.translate(pos.x, pos.y);
    ctx.rotate(-rotate * Math.PI / 180);
    ctx.fillText(fontText, 0, 0);
    ctx.restore();
  });

  // 恢复状态
  ctx.restore();
}

水印技术亮点：

响应式设计：根据Canvas宽度自动调整水印尺寸
多点布局：四个位置分布水印，覆盖整个页面
旋转效果：每个水印独立旋转30度，增加覆盖范围
透明度处理：使用半透明颜色，不影响内容可读性

4. 防下载与打印控制

为了增强文档安全性，我们实现了全面的防下载和打印控制功能：

// 禁用右键菜单
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  return false;
});

// 禁用文本选择
document.addEventListener('selectstart', function(e) {
  e.preventDefault();
  return false;
});

// 禁用拖拽
document.addEventListener('dragstart', function(e) {
  e.preventDefault();
  return false;
});

// 拦截Ctrl+P打印快捷键
window.addEventListener("keydown", function (event) {
  if (event.keyCode === 80 && (event.ctrlKey || event.metaKey) && 
      !event.altKey && (!event.shiftKey || window.chrome || window.opera)) {
    // 自定义打印行为或完全禁用
    event.preventDefault();
    event.stopImmediatePropagation();
  }
}, true);

Vue组件实现

基于以上技术，我们实现了一个功能完善的Vue3 PDF预览组件：

<template>
  <iframe
    :width="viewerWidth"
    :height="viewerHeight"
    id="ifra"
    frameborder="0"
    :src="`/pdfJs/web/viewer.html?file=${src}&waterMark=${waterMark}`"
    @load="pagesRendered"
  />
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '~/store/user'

const props = defineProps({
  src: String,
  width: [String, Number],
  height: [String, Number],
  pageScale: [String, Number],
  theme: String,
  fileName: String
})

const emit = defineEmits(['loaded'])

// 默认值设置
const propsWithDefaults = withDefaults(props, {
  width: '100%',
  height: '100vh',
  pageScale: 'page-width',
  theme: 'dark',
  fileName: ''
})

// 尺寸计算
const viewerWidth = computed(() => {
  if (typeof props.width === 'number') {
    return props.width + 'px'
  } else {
    return props.width
  }
})

const viewerHeight = computed(() => {
  if (typeof props.height === 'number') {
    return props.height + 'px'
  } else {
    return props.height
  }
})

// 用户信息和水印
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const waterMark = computed(() => {
  const { userName, phoneNum } = userInfo.value
  const phoneSuffix = phoneNum && phoneNum.substring(phoneNum.length - 4)
  return userName + phoneSuffix
})

// 页面渲染事件
function pagesRendered(pdfApp) {
  emit('loaded', pdfApp)
}
</script>

<style scoped>
#ifra {
  max-width: 100%;
  height: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>

使用方法

基本使用

<template>
  <PDFViewer
    src="path/to/your/pdf/file.pdf"
    :width="800"
    :height="600"
    @loaded="handlePdfLoaded"
  />
</template>

<script setup>
import PDFViewer from '@/components/PDFViewer/index.vue'

function handlePdfLoaded(pdfApp) {
  console.log('PDF已加载完成', pdfApp)
}
</script>

高级配置

<template>
  <PDFViewer
    src="path/to/your/pdf/file.pdf"
    width="100%"
    height="90vh"
    page-scale="page-fit"
    theme="light"
    file-name="自定义文件名.pdf"
    @loaded="handlePdfLoaded"
  />
</template>

性能优化

1. 渲染性能优化

// 设置合理的maxCanvasPixels
const maxCanvasPixels = isHighEndDevice ? 
  16777216 * 4 :  // 4K显示器
  8388608 * 2;   // 普通显示器

const pdfViewer = new PDFViewer({
  container: document.getElementById('viewer'),
  maxCanvasPixels: maxCanvasPixels
});

2. 内存管理优化

// 限制缓存页面数量，防止内存溢出
pdfViewer.setDocument(pdfDocument);
pdfViewer.currentScaleValue = 'auto';

// 定期清理不可见页面
setInterval(() => {
  const visiblePages = pdfViewer._getVisiblePages();
  // 清理不可见页面的缓存
}, 30000);

3. 按需渲染

// 只渲染可见页面
pdfViewer.onPagesLoaded = () => {
  const visiblePages = pdfViewer._getVisiblePages();
  // 只渲染可见页面，延迟渲染其他页面
};

注意事项

PDF.js版本：确保使用兼容的PDF.js版本，不同版本API可能有差异
跨域处理：PDF文件可能存在跨域问题，需确保服务器配置了正确的CORS头
大文件处理：对于大型PDF文件，考虑添加加载进度提示
移动端适配：在移动设备上可能需要额外的样式调整
安全限制：虽然实现了防下载和水印，但无法完全防止技术用户获取PDF内容

扩展功能建议

页面跳转：添加页面导航功能，支持直接跳转到指定页面
文本搜索：实现PDF内容搜索功能
注释工具：添加PDF注释、标记功能
水印样式自定义：支持更多水印样式和位置配置
访问控制：基于用户角色限制PDF访问权限

总结

本文介绍了如何基于Mozilla PDF.js实现一个功能完善的PDF预览组件，并重点讲解了如何添加自定义的防下载和水印功能。通过合理的技术选型和组件设计，我们实现了一个既美观又安全的PDF预览解决方案。

在实际应用中，您可以根据具体需求进一步扩展功能，如添加页面导航、文本搜索等高级特性，为用户提供更丰富的PDF阅读体验，同时确保文档内容的安全性。

希望本文对您在Vue3项目中实现安全PDF预览功能有所帮助！

需要源码的评论区回复6666

阅读视图