在現代 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