当前位置：首页 > news >正文

在Next.js里玩转pdf预览

news 2025/7/18 9:06:47

1.背景

在项目开发中，pdf预览是一个很常见的业务。各大公司为了保护自己的知识产权，也会对pdf预览进行限制，比如：不允许下载、打印，不允许提取文字等等。要想在实现预览功能的基础上还要附加这些限制，有很多中可选的方法。本篇文章主要从前端视角谈谈怎么实现这个业务。

在开始讲解之前，需要先明确一点：使用纯前端的方法是无法完全避免用户窃取pdf的内容的，只能通过一些配置和脚本增加用户获取的难度。更安全的方法是后端对于pdf资源的请求加以限制，或者对pdf增加水印等等。

2.技术栈

本篇文章是在Next.js（React框架）的基础上借助pdf.js三方包演示怎么实现pdf预览和限制下载的。读者需要对React，JavaScript语法有基本的了解。

3.实现pdf预览

3.1. 安装pdf.js依赖

npm install pdfjs-dist
# 或者
yarn add pdfjs-dist

3.2. 创建 PDF 查看器组件

在 components/PdfViewer.js 中创建组件：

'use client'; // 必须标记为客户端组件import { useEffect, useRef, useState } from 'react';
import * as pdfjsLib from 'pdfjs-dist';export default function PdfViewer({ pdfUrl }) {const canvasRef = useRef(null);const [numPages, setNumPages] = useState(0);const [currentPage, setCurrentPage] = useState(1);const [scale, setScale] = useState(1.5);// 初始化 PDF.jsuseEffect(() => {pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';}, []);// 加载 PDFuseEffect(() => {if (!pdfUrl) return;const loadPdf = async () => {const loadingTask = pdfjsLib.getDocument(pdfUrl);const pdf = await loadingTask.promise;setNumPages(pdf.numPages);renderPage(pdf, currentPage);};loadPdf().catch(console.error);}, [pdfUrl, currentPage]);// 渲染指定页面const renderPage = async (pdf, pageNum) => {const page = await pdf.getPage(pageNum);const viewport = page.getViewport({ scale });const canvas = canvasRef.current;const context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;await page.render({canvasContext: context,viewport: viewport}).promise;};const goToPrevPage = () => {if (currentPage > 1) {setCurrentPage(currentPage - 1);}};const goToNextPage = () => {if (currentPage < numPages) {setCurrentPage(currentPage + 1);}};return (<div className="pdf-viewer"><div className="pdf-controls"><button onClick={goToPrevPage} disabled={currentPage <= 1}>上一页</button><span>第 {currentPage} 页 / 共 {numPages} 页</span><button onClick={goToNextPage} disabled={currentPage >= numPages}>下一页</button><select value={scale} onChange={(e) => setScale(parseFloat(e.target.value))}><option value="0.5">50%</option><option value="1.0">100%</option><option value="1.5">150%</option><option value="2.0">200%</option></select></div><div className="pdf-canvas-container"><canvas ref={canvasRef} /></div></div>);
}

3.3. 创建样式文件

在 components/PdfViewer.module.css 中：

.pdf-viewer {width: 100%;max-width: 800px;margin: 0 auto;
}.pdf-controls {display: flex;justify-content: center;align-items: center;gap: 15px;margin-bottom: 20px;
}.pdf-canvas-container {border: 1px solid #ddd;box-shadow: 0 2px 5px rgba(0,0,0,0.1);overflow: auto;max-height: 80vh;
}button {padding: 5px 10px;cursor: pointer;
}button:disabled {opacity: 0.5;cursor: not-allowed;
}select {padding: 5px;
}

3.4. 在页面中使用组件

在 app/page.js 中：

import PdfViewer from '../components/PdfViewer';
import styles from './page.module.css';export default function Home() {// 可以是本地public文件夹中的PDF或远程URLconst pdfUrl = '/sample.pdf'; // 确保PDF文件放在public文件夹中return (<main className={styles.main}><h1>PDF 查看器</h1><PdfViewer pdfUrl={pdfUrl} /></main>);
}

3.5.注意事项

在组件的第一行要声明‘use client’告诉next这是客户端组件（因为pdf.js调用的是浏览器的canvas用来绘制pdf后显示的，所以必须在浏览器环境下才能运行）

4.全局事件限制pdf

// 全局事件监听
useEffect(() => {// 禁用鼠标右键const handleContextMenu = (e: MouseEvent) => {e.preventDefault();e.stopPropagation();return false;};// 禁用键盘快捷键const handleKeyDown = (e: KeyboardEvent) => {if ((e.ctrlKey && (e.key === 's' || e.key === 'S')) ||(e.ctrlKey && (e.key === 'p' || e.key === 'P')) ||(e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'i')) ||e.key === 'F12' ||(e.ctrlKey && e.shiftKey && (e.key === 'C' || e.key === 'c')) ||(e.ctrlKey && e.shiftKey && (e.key === 'J' || e.key === 'j')) ||(e.ctrlKey && (e.key === 'u' || e.key === 'U')) ||(e.ctrlKey && (e.key === 'a' || e.key === 'A')) ||(e.ctrlKey && (e.key === 'c' || e.key === 'C')) ||(e.ctrlKey && (e.key === 'v' || e.key === 'V')) ||(e.ctrlKey && (e.key === 'x' || e.key === 'X'))) {e.preventDefault();e.stopPropagation();return false;}};// 禁用文本选择const handleSelectStart = (e: Event) => {e.preventDefault();return false;};  // 禁用拖拽const handleDragStart = (e: DragEvent) => {e.preventDefault();return false;};document.addEventListener('contextmenu', handleContextMenu, true);document.addEventListener('keydown', handleKeyDown, true);document.addEventListener('selectstart', handleSelectStart, true);document.addEventListener('dragstart', handleDragStart, true);window.addEventListener('keydown', handleKeyDown, true);return () => {// 组件注销时，清除事件方式内存泄漏document.removeEventListener('contextmenu', handleContextMenu, true);document.removeEventListener('keydown', handleKeyDown, true);document.removeEventListener('selectstart', handleSelectStart, true);document.removeEventListener('dragstart', handleDragStart, true);window.removeEventListener('keydown', handleKeyDown, true);};}, []);