React项目实战：用PDF.js实现PDF预览+打印下载（附完整代码）

React项目实战用PDF.js实现PDF预览打印下载附完整代码在Web开发中PDF文件的展示和操作是一个常见需求。无论是企业文档管理系统、在线教育平台还是电子合同签署场景都需要可靠的PDF处理方案。本文将带你从零开始在React项目中集成PDF.js库实现PDF预览、打印和下载三大核心功能并提供可直接复用的完整代码。1. 环境准备与基础配置在开始之前我们需要确保开发环境已经就绪。创建一个新的React项目如果已有项目可跳过此步npx create-react-app pdf-viewer-demo cd pdf-viewer-demo接下来安装PDF.js的核心依赖库npm install pdfjs-dist types/pdfjs-distPDF.js使用Web Worker来提高性能避免阻塞主线程。我们需要正确配置Worker路径。在项目根目录创建pdf.worker.config.js文件import { GlobalWorkerOptions } from pdfjs-dist; // 使用CDN提供的Worker文件 GlobalWorkerOptions.workerSrc https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js;然后在应用的入口文件如index.js中引入这个配置import ./pdf.worker.config;2. 基础PDF预览实现让我们先构建最核心的PDF预览功能。创建一个PDFViewer.js组件import React, { useEffect, useRef, useState } from react; import { getDocument } from pdfjs-dist; const PDFViewer ({ url }) { const canvasRef useRef(null); const [pageNum, setPageNum] useState(1); const [totalPages, setTotalPages] useState(0); const [isLoading, setIsLoading] useState(true); const [error, setError] useState(null); useEffect(() { const abortController new AbortController(); const loadPDF async () { try { setIsLoading(true); setError(null); const pdf await getDocument({ url, withCredentials: false }).promise; if (abortController.signal.aborted) return; setTotalPages(pdf.numPages); const page await pdf.getPage(pageNum); const viewport page.getViewport({ scale: 1.5 }); const canvas canvasRef.current; const context canvas.getContext(2d); canvas.height viewport.height; canvas.width viewport.width; await page.render({ canvasContext: context, viewport }).promise; setIsLoading(false); } catch (err) { if (!abortController.signal.aborted) { setError(err.message); setIsLoading(false); } } }; loadPDF(); return () { abortController.abort(); }; }, [url, pageNum]); return ( div classNamepdf-container {isLoading div classNameloading加载中.../div} {error div classNameerror{error}/div} div classNamecontrols button disabled{pageNum 1} onClick{() setPageNum(p p - 1)} 上一页 /button span第 {pageNum} 页 / 共 {totalPages} 页/span button disabled{pageNum totalPages} onClick{() setPageNum(p p 1)} 下一页 /button /div canvas ref{canvasRef} / /div ); }; export default PDFViewer;这个基础组件实现了以下功能PDF文档加载与渲染分页浏览控制加载状态和错误处理资源清理使用AbortController3. 打印功能实现在PDF预览基础上我们添加打印功能。打印的核心思路是将Canvas内容转换为图片然后通过浏览器打印API实现const handlePrint () { const canvas canvasRef.current; if (!canvas) return; // 创建新窗口用于打印 const printWindow window.open(, _blank); const imgData canvas.toDataURL(image/png); printWindow.document.write( !DOCTYPE html html head title打印预览/title style body { margin: 0; padding: 0; } img { max-width: 100%; height: auto; } /style /head body img src${imgData} / /body /html ); printWindow.document.close(); // 确保图片加载完成后再打印 printWindow.onload () { setTimeout(() { printWindow.print(); printWindow.close(); }, 500); }; };这个打印方案有以下特点兼容主流浏览器保持PDF原始比例避免干扰主页面自动关闭打印窗口4. 下载功能实现下载功能的实现思路与打印类似都是将Canvas转换为图片但保存方式不同const handleDownload () { const canvas canvasRef.current; if (!canvas) return; // 从URL提取文件名或使用默认值 const getFileName () { if (!url) return document; const matches url.match(/\/([^\/?#])[^\/]*$/); if (!matches || matches.length 2) return document; return matches[1].replace(/\.pdf$/i, ); }; const link document.createElement(a); link.download ${getFileName()}.png; link.href canvas.toDataURL(image/png); document.body.appendChild(link); link.click(); document.body.removeChild(link); };下载功能的关键点自动从URL提取有意义的文件名支持PDF多页下载需要扩展保持图片高质量无页面刷新5. 完整组件与优化将上述功能整合并添加一些优化措施import React, { useEffect, useRef, useState } from react; import { getDocument } from pdfjs-dist; const PDFViewer ({ url }) { const canvasRef useRef(null); const [pageNum, setPageNum] useState(1); const [totalPages, setTotalPages] useState(0); const [isLoading, setIsLoading] useState(true); const [error, setError] useState(null); const [scale, setScale] useState(1.5); // 加载并渲染PDF useEffect(() { const abortController new AbortController(); const loadPDF async () { try { setIsLoading(true); setError(null); const pdf await getDocument({ url, withCredentials: false }).promise; if (abortController.signal.aborted) return; setTotalPages(pdf.numPages); 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 }).promise; setIsLoading(false); } catch (err) { if (!abortController.signal.aborted) { setError(err.message); setIsLoading(false); } } }; loadPDF(); return () { abortController.abort(); }; }, [url, pageNum, scale]); const handlePrint () { /* 打印实现代码同上 */ }; const handleDownload () { /* 下载实现代码同上 */ }; const zoomIn () setScale(s Math.min(s 0.1, 3)); const zoomOut () setScale(s Math.max(s - 0.1, 0.5)); return ( div classNamepdf-viewer-container div classNametoolbar div classNamepage-controls button disabled{pageNum 1} onClick{() setPageNum(p p - 1)} 上一页 /button span第 {pageNum} 页 / 共 {totalPages} 页/span button disabled{pageNum totalPages} onClick{() setPageNum(p p 1)} 下一页 /button /div div classNamezoom-controls button onClick{zoomOut}-/button span缩放: {(scale * 100).toFixed(0)}%/span button onClick{zoomIn}/button /div div classNameaction-buttons button onClick{handlePrint}打印/button button onClick{handleDownload}下载/button /div /div {isLoading div classNameloading-indicator加载中.../div} {error div classNameerror-message{error}/div} div classNamecanvas-container canvas ref{canvasRef} / /div /div ); }; export default PDFViewer;6. 样式优化与响应式设计为了让PDF查看器更美观实用添加一些CSS样式.pdf-viewer-container { max-width: 100%; margin: 0 auto; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; } .toolbar { background: #f5f5f5; padding: 10px; display: flex; flex-wrap: wrap; gap: 15px; align-items: center; border-bottom: 1px solid #ddd; } .toolbar div { display: flex; align-items: center; gap: 8px; } button { padding: 6px 12px; background: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.2s; } button:hover { background: #f0f0f0; } button:disabled { opacity: 0.5; cursor: not-allowed; } .canvas-container { background: #eee; display: flex; justify-content: center; padding: 20px; min-height: 500px; } .loading-indicator { padding: 20px; text-align: center; color: #666; } .error-message { padding: 20px; text-align: center; color: #d32f2f; background: #ffebee; } media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar div { justify-content: space-between; } }7. 高级功能扩展基础功能实现后可以考虑添加一些增强功能多页缩略图导航const [thumbnails, setThumbnails] useState([]); // 在useEffect中添加缩略图生成逻辑 const generateThumbnails async (pdf) { const thumbs []; for (let i 1; i Math.min(pdf.numPages, 10); i) { const page await pdf.getPage(i); const viewport page.getViewport({ scale: 0.2 }); const canvas document.createElement(canvas); const context canvas.getContext(2d); canvas.height viewport.height; canvas.width viewport.width; await page.render({ canvasContext: context, viewport }).promise; thumbs.push({ pageNum: i, dataUrl: canvas.toDataURL(image/png) }); } setThumbnails(thumbs); };文本选择与搜索PDF.js支持文本层渲染启用后可以实现文本选择和搜索await page.render({ canvasContext: context, viewport, // 添加文本层 textLayer: true }).promise; // 需要添加对应的CSS .text-layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; opacity: 0.2; line-height: 1; } .text-layer ::selection { background: rgba(0,0,255,0.3); }PDF表单支持PDF.js可以渲染交互式表单元素const pdf await getDocument({ url, withCredentials: false, // 启用表单支持 cMapUrl: https://cdn.jsdelivr.net/npm/pdfjs-dist2.5.207/cmaps/, cMapPacked: true }).promise;8. 性能优化建议对于大型PDF文档需要考虑性能优化按需加载页面只渲染当前可见页面使用Web Worker确保PDF解析不阻塞主线程内存管理及时清理不再使用的页面对象渐进式渲染先显示低分辨率版本再逐步提高质量虚拟滚动对于多页文档只渲染视口内的页面// 内存清理示例 useEffect(() { return () { if (pdf) { pdf.destroy(); } }; }, [pdf]);9. 常见问题解决方案跨域问题如果PDF文件位于不同域可能需要配置CORS或使用代理const pdf await getDocument({ url, withCredentials: true, // 如果需要携带cookie httpHeaders: { // 自定义请求头 Authorization: Bearer token } }).promise;大文件加载对于大文件可以启用范围请求const pdf await getDocument({ url, rangeChunkSize: 65536, // 64KB chunks disableRange: false // 启用范围请求 }).promise;字体显示问题确保正确配置CMap路径GlobalWorkerOptions.workerSrc ...; getDocument({ cMapUrl: https://cdn.jsdelivr.net/npm/pdfjs-dist2.5.207/cmaps/, cMapPacked: true });10. 完整代码整合将所有功能整合到一个完整的组件中import React, { useEffect, useRef, useState } from react; import { getDocument } from pdfjs-dist; import ./PDFViewer.css; const PDFViewer ({ url }) { const canvasRef useRef(null); const [state, setState] useState({ pageNum: 1, totalPages: 0, isLoading: true, error: null, scale: 1.5, thumbnails: [] }); const { pageNum, totalPages, isLoading, error, scale, thumbnails } state; useEffect(() { const abortController new AbortController(); let pdfInstance null; const loadPDF async () { try { setState(prev ({ ...prev, isLoading: true, error: null })); const pdf await getDocument({ url, withCredentials: false, cMapUrl: https://cdn.jsdelivr.net/npm/pdfjs-dist2.5.207/cmaps/, cMapPacked: true }).promise; if (abortController.signal.aborted) return; pdfInstance pdf; setState(prev ({ ...prev, totalPages: pdf.numPages })); await renderPage(pdf, pageNum); await generateThumbnails(pdf); setState(prev ({ ...prev, isLoading: false })); } catch (err) { if (!abortController.signal.aborted) { setState(prev ({ ...prev, error: err.message, isLoading: false })); } } }; const renderPage async (pdf, pageNumber) { const page await pdf.getPage(pageNumber); 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, textLayer: true }).promise; }; const generateThumbnails async (pdf) { const thumbs []; const pageCount Math.min(pdf.numPages, 10); for (let i 1; i pageCount; i) { const page await pdf.getPage(i); const viewport page.getViewport({ scale: 0.2 }); const canvas document.createElement(canvas); const context canvas.getContext(2d); canvas.height viewport.height; canvas.width viewport.width; await page.render({ canvasContext: context, viewport }).promise; thumbs.push({ pageNum: i, dataUrl: canvas.toDataURL(image/png) }); } setState(prev ({ ...prev, thumbnails: thumbs })); }; loadPDF(); return () { abortController.abort(); if (pdfInstance) { pdfInstance.destroy(); } }; }, [url, pageNum, scale]); const handlePrint () { const canvas canvasRef.current; if (!canvas) return; const printWindow window.open(, _blank); const imgData canvas.toDataURL(image/png); printWindow.document.write( !DOCTYPE html html head title打印预览/title style body { margin: 0; padding: 0; } img { max-width: 100%; height: auto; } /style /head body img src${imgData} / /body /html ); printWindow.document.close(); printWindow.onload () { setTimeout(() { printWindow.print(); printWindow.close(); }, 500); }; }; const handleDownload () { const canvas canvasRef.current; if (!canvas) return; const getFileName () { if (!url) return document; const matches url.match(/\/([^\/?#])[^\/]*$/); if (!matches || matches.length 2) return document; return matches[1].replace(/\.pdf$/i, ); }; const link document.createElement(a); link.download ${getFileName()}_page${pageNum}.png; link.href canvas.toDataURL(image/png, 1.0); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; const zoomIn () setState(prev ({ ...prev, scale: Math.min(prev.scale 0.1, 3) })); const zoomOut () setState(prev ({ ...prev, scale: Math.max(prev.scale - 0.1, 0.5) })); const goToPage (page) { if (page 1 page totalPages) { setState(prev ({ ...prev, pageNum: page })); } }; return ( div classNamepdf-viewer-container div classNametoolbar div classNamepage-controls button disabled{pageNum 1} onClick{() goToPage(pageNum - 1)} 上一页 /button input typenumber min1 max{totalPages} value{pageNum} onChange{(e) goToPage(parseInt(e.target.value))} / span/ {totalPages}/span button disabled{pageNum totalPages} onClick{() goToPage(pageNum 1)} 下一页 /button /div div classNamezoom-controls button onClick{zoomOut}-/button span{(scale * 100).toFixed(0)}%/span button onClick{zoomIn}/button /div div classNameaction-buttons button onClick{handlePrint}打印/button button onClick{handleDownload}下载/button /div /div {isLoading div classNameloading-indicator加载中.../div} {error div classNameerror-message{error}/div} div classNamecontent-area {thumbnails.length 0 ( div classNamethumbnail-sidebar {thumbnails.map(thumb ( div key{thumb.pageNum} className{thumbnail ${thumb.pageNum pageNum ? active : }} onClick{() goToPage(thumb.pageNum)} img src{thumb.dataUrl} alt{Page ${thumb.pageNum}} / span{thumb.pageNum}/span /div ))} /div )} div classNamecanvas-container canvas ref{canvasRef} / /div /div /div ); }; export default PDFViewer;对应的CSS文件.pdf-viewer-container { max-width: 100%; margin: 0 auto; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; background: #fff; } .toolbar { background: #f5f5f5; padding: 10px; display: flex; flex-wrap: wrap; gap: 15px; align-items: center; border-bottom: 1px solid #ddd; } .toolbar div { display: flex; align-items: center; gap: 8px; } button, input { padding: 6px 12px; background: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.2s; } button:hover { background: #f0f0f0; } button:disabled { opacity: 0.5; cursor: not-allowed; } input { width: 50px; text-align: center; } .content-area { display: flex; min-height: 500px; } .thumbnail-sidebar { width: 120px; padding: 10px; background: #f9f9f9; border-right: 1px solid #eee; overflow-y: auto; } .thumbnail { margin-bottom: 10px; cursor: pointer; text-align: center; padding: 5px; border-radius: 4px; } .thumbnail:hover { background: #eee; } .thumbnail.active { background: #e0e0e0; } .thumbnail img { max-width: 100%; height: auto; margin-bottom: 5px; border: 1px solid #ddd; } .canvas-container { flex: 1; padding: 20px; display: flex; justify-content: center; align-items: flex-start; background: #eee; } .loading-indicator { padding: 20px; text-align: center; color: #666; } .error-message { padding: 20px; text-align: center; color: #d32f2f; background: #ffebee; } .text-layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; opacity: 0.2; line-height: 1; } .text-layer ::selection { background: rgba(0,0,255,0.3); } media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar div { justify-content: space-between; } .content-area { flex-direction: column; } .thumbnail-sidebar { width: 100%; display: flex; overflow-x: auto; padding: 10px 5px; } .thumbnail { margin-right: 10px; margin-bottom: 0; min-width: 60px; } }