在现代 Web 项目中，PDF 浏览是一个常见需求：从政务公文到合同协议，PDF 文件无处不在。但很多方案要么体验不佳，要么集成复杂。今天，我给大家带来一个开箱即用、功能全面的 PDF 预览组件 —— [`PDFView`](https://www.npmjs.com/package/react-nexlif)！

预览地址 ：https://nexlif.xiaoyaoai.fun/components/pdf-viewhttps://nexlif.xiaoyaoai.fun/components/pdf-view  

✨ 它基于 `react-pdf` 封装，支持分页浏览、放大缩小、旋转、缩略图导航、全屏模式，甚至懒加载优化大文件性能！

## 🔧 快速上手

### 安装组件

```bash
npm install react-nexlif
# 或者
yarn add react-nexlif

引入示例：一键预览 PDF！

import React, { useState } from 'react';
import { PDFView } from 'react-nexlif';const App = () => {const [visible, setVisible] = useState(false);const fileUrl = 'https://www.gov.cn/zhengce/pdfFile/2023_PDF.pdf'; // 可替换为你的链接return (<div><button onClick={() => setVisible(true)}>打开 PDF</button>{visible && (<PDFViewfile={fileUrl}onClose={() => setVisible(false)}/>)}</div>);
};export default App;

💡 功能全景

功能项	描述
✅ 分页浏览	支持上一页、下一页、跳转页面
🔍 缩放支持	放大 / 缩小，适配不同显示尺寸
🔄 旋转功能	向左 / 向右旋转每页 PDF（支持 90° 递增）
🖥️ 全屏模式	Ctrl+F 一键全屏，沉浸式阅读
🎯 缩略图导航	Ctrl+T 快速切换缩略图预览，点击即跳转
🧠 懒加载	多页 PDF 仅加载可视区附近页面，大幅提升性能
⚙️ 自定义控制栏	可配置每个按钮是否展示（关闭、缩放、旋转等）
🧩 错误提示	文件不存在或格式异常会显示错误页面，避免白屏

🎮 进阶用法：懒加载+缩略图预览

import React, { useState, useRef, useEffect } from 'react';
import { PDFView } from 'react-nexlif';const App = () => {const ref = useRef<HTMLDivElement>(null);const [fileUrl, setFileUrl] = useState<string | null>(null);useEffect(() => {setFileUrl('https://www.gov.cn/zhengce/pdfFile/2023_PDF.pdf');}, []);return (<div ref={ref} style={{ height: '100%', width: '100%' }}><PDFViewparentDom={ref.current}file={fileUrl}lazyLoad={true}width={650}lazyLoadConfig={{threshold: 400,pagesPerLoad: 4}}onClose={() => setFileUrl(null)}/></div>);
};export default App;

⚙️ 全部 Props 一览

interface PDFViewProps {file?: string | null;parentDom?: HTMLDivElement | null;onClose?: () => void;operationConfig?: {showPage?: boolean;zoom?: boolean;rotate?: boolean;screenScale?: boolean;thumbnails?: boolean;close?: boolean;};width?: number;lazyLoad?: boolean;lazyLoadConfig?: {threshold?: number;pagesPerLoad?: number;};
}

🎨 样式自定义

可以自由定制 PDF 查看器样式（例如背景色、按钮栏、缩略图风格）：

.view {background-color: #f5f5f5;padding: 20px;
}.pageMain {border: 1px solid #e8e8e8;border-radius: 4px;
}.thumbnail:hover {border-color: #1890ff;
}

🚧 注意事项

1. 📂 跨域 PDF 文件需配置 CORS

2. 🔍 建议使用懒加载应对大型 PDF

3. 💬 按钮支持 ARIA 属性，键盘可操作，增强无障碍体验

4. 🧪 已支持在现代浏览器（Chrome/Edge）运行

---

🔚 总结

如果你正在寻找一个轻量、可扩展、高性能的 PDF 浏览器组件，那么 PDFView 绝对值得你试试！

快速集成、易于配置、丰富功能，是中后台系统 PDF 查看功能的终极利器！

欢迎大家使用组件并 ⭐Star 支持作者！如果你喜欢这篇文章，记得 👍点赞 + ❤️收藏 + 💬评论交流！

---

📎 开源组件地址：react-nexlif - NPM