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

在现代 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!

javascript 复制代码
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 仅加载可视区附近页面,大幅提升性能
⚙️ 自定义控制栏 可配置每个按钮是否展示(关闭、缩放、旋转等)
🧩 错误提示 文件不存在或格式异常会显示错误页面,避免白屏

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

javascript 复制代码
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 一览

javascript 复制代码
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 查看器样式(例如背景色、按钮栏、缩略图风格):

css 复制代码
.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

相关推荐
foxhuli22938 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html