React PDF Viewer
made with React

React PDF Viewer

这是一个PDF文件查看器。

简介及使用教程

React PDF Viewer是用Typescript编写的组件,用于查看PDF文档,提供打开、搜索、复制、加书签、旋转及浏览文档的功能。ReactPDF Viewer还支持SSR,UI本地化和受密码保护的文档。

特点

  •  支持密码保护文档
  •  缩放:支持精确尺寸、页面适应及页面宽度等自定义级别缩放
  •  页面导航
  •  快速导航到首页或最后一页
  •  搜索文字
  •  前一页缩放图
  •  查看并导航目录
  •  列出并下载附件
  •  旋转
  •  文本选择和手工工具模式
  •  不同的滚动模式
  •  全屏模式
  •  支持打开本地文件,支持拖拽
  •  下载文档
  •  查看文档属性
  •  支持 SSR
  •  打印
  •  工具栏支持自定义
  •  所有文本选项都支持本地化

安装

npm install pdfjs-dist@2.4.456
npm install @phuocng/react-pdf-viewer

使用

引入组件和CSS

import Viewer, { Worker } from '@phuocng/react-pdf-viewer';

import '@phuocng/react-pdf-viewer/cjs/react-pdf-viewer.css';

使用组件

<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.4.456/build/pdf.worker.min.js">
    <div style={{ height: '750px' }}>
        <Viewer fileUrl="/path/to/document.pdf" />
    </div>
</Worker>

示例

作者

Phuoc Nguyen

@nghuuphuoc

相关项目

这是一个用于使用React构建可访问的富Web应用程序的工具包。
这是一个使用Material-UI的文件上传Dropzone组件。
这是一个基于React.js的时间差显示组件。
这是一个开源的javascript文件上传器。
这是一个基于开源Material风格的组件库。
这是一个React组件库。
这是一个可定制和复用的React Native组件库。