[特殊字符] 超强 Web React版 PDF 阅读器！支持分页、缩放、旋转、全屏、懒加载、缩略图！

news2025/6/2 19:40:45

在现代 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 && (
        <PDFView
          file={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%' }}>
      <PDFView
        parentDom={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;
}