为你的React应用程序推荐的PDF浏览器库
今天，许多Web应用程序为其用户提供了内置的PDF查看选项。然而，选择一个并不容易，因为它们的功能远远超过显示PDF。
因此，在这篇文章中，我将评估5个React的PDF浏览器库，并进行功能比较，以帮助你选择符合你要求的最佳库。
1.React-pdf/renderer - 专门用于渲染和创建PDF
React-pdf/renderer是一个广泛使用的库，用于在浏览器和服务器上创建PDF文件。
这个库提供了一些基本的组件来开始工作，随着你的熟悉，你可以定制它们来提出更吸引人的设计。
<Document>:这是一个PDF文件的根。<page>：单页是由这个标签描述的。它需要有一定的尺寸（如A4）。<View>: 一个通用的容器，用于样式和格式化PDF。你可以使用StyleSheet.create() API，用Flexbox和CSS属性的全部功能来设计你的视图，以布局PDF，类似于它在React Native中的使用方式。<Text>:用于显示文本。<Image>: 可用于在PDF文档中插入图片。<Link>: 可用于生成超链接注释。
另外，React-pdf/renderer带有一些惊人的功能，可以用来生成令人惊叹的文档。我可以很容易地列出其中的一些功能：
- 支持各种样式和CSS属性。
- 通过usePDF挂钩API对文档进行更多控制。
- 提供一个Node API。
- 伟大的文档。
- 快速和高效。
- 高度可定制&易于使用。
除了这些，React-pdf/renderer库每周有大约93,000次下载，GitHub上有超过9.3k颗星星。
你可以使用npm install - save @react-pdf/renderer命令轻松地将这个库安装到你的项目中。
2.React-pdf - 像显示图片一样显示PDF
我们前面讨论的React-pdf/renderer是专门用于创建PDF的。但如果你正在寻找一个只显示PDF的库，React-pdf是最好的选择。
React-pdf提供了一个React组件API，允许打开PDF文件并使用PDF.js渲染。虽然这是一个专门用于查看PDF的简单库，但它有一些惊人的功能，比如：
- 易于使用 - 插入Document组件并给它一个文件道具。React-pdf会把它分类，不管它是一个URL，一个文件，还是base64。
- 支持自定义事件。
- 多种渲染方法。
- 支持文本选择和注释。
- 跨浏览器兼容性。
- 可访问性 - React-pdf不仅将PDF渲染成图像。还可以作为屏幕阅读器可以掌握的可见文本层，使你的内容对视力障碍者来说更可用。
- 免费和开源。
除此以外，每周有超过296,000次的下载和4.6K颗GitHub星，这表明这个库在React社区是多么受欢迎。
你可以使用npm i react-pdf命令来安装它。
3.@phuocng/react-pdf-viewer - 由React Hooks提供
React-pdf-viewer是一个完全由React钩子驱动的React组件，用TypeScript编写。
尽管是新的，React-pdf-viewer有一些令人兴奋的功能，让你为之倾倒。为了更好地理解，我将把它们列举如下：
- 支持受密码保护的文件。
- 缩放：支持自定义级别，如实际尺寸、页面合适和页面宽度。
- 页面之间的导航。
- 搜索文本。
- 预览页面缩略图。
- 查看和浏览目录。
- 列出和下载附件。
- 旋转和许多滚动模式。
- 文本选择和手动工具模式。
- 全屏模式。
- 可以打开本地文件（例如，拖放一个本地文件来查看它。
- 下载文件和打印。
- 查看文件属性。
- 支持SSR。
此外，它还可以通过它的插件集合进行完全定制，并通过伟大的文档帮助用户。
自它首次发布以来只有一年的时间，它已经有超过2000次的每周下载和519颗GitHub星。
注意： 你需要有React 16.8以上版本和TypeScript 3.8以上版本才能使用React-pdf-viewer。
你可以使用npm i @phuocng/react-pdf-viewer命令来安装它。
4.React-file-viewer-支持许多文件格式
React-file-viewer是一个可扩展的文件查看器，用于Web应用程序，支持PDF、图片、csv、xslx和docx。
这个库提供了一个名为FileViewer的组件，用来显示内容，它接受几个props：
- fileType字符串。要显示的资源类型。如果你使用一个不支持的文件类型，将出现一个不支持的文件类型通知。
- filePath 字符串。FileViewer将显示的资源的URL。
- onError 函数[可选]。如果文件查看器无法获取或呈现所请求的资源，该函数将被调用。在这里你可以指定一个日志工具的回调。
- errorComponent 反应元素 [可选]。一个在发生错误时渲染的组件，而不是 react-file-viewer 默认的错误组件。
- unsupported Component react element [可选]。在文件格式不被支持的情况下要呈现的组件。
除此以外，它还有一些特殊的功能，比如：
- 可以用Jest或Enzyme进行测试。
- 通过使用make lint运行linter，在我们运行代码前发现错误，从而节省时间。
- 可扩展性--添加支持的文件类型很容易。
另外，这个库是最受欢迎的pdf查看器库之一，每周有17,348次下载，有291个GitHub Stars。
注意： 这个库在React 16以上版本中功能良好。如果你使用的是React< 16版本，你很可能需要安装React-file-viewer 0.5版本。
React-file-viewer可以用npm i react-file-viewer命令安装.
5.@mikecousins/react-pdf
@mikecousins/react-pdf是一个使用PDF.js来渲染PDF文档的组件。
这个库使用一个叫做usePdf的Hook来渲染PDF，我们需要用这个Hook传递几个props。
- file - PDF文件的URL。
- page - 表示你要显示的页面。默认=1。
- scal - 允许你对PDF进行缩放。默认=1。
- onDocumentLoadSuccess-你可以定义一个回调函数，在PDF文档数据被完全加载后被调用。
- onDocumentLoadFail-让你定义一个回调函数，当发生PDF文档数据加载错误时被调用。
- onPageLoadSuccess-让你定义一个回调，它将在PDF页面数据加载完毕后被调用。
- onPageRenderSuccess -让你定义一个回调，在PDF页面被完全渲染到DOM后执行。
如果你认为这工作太多；你可以简单地直接使用Pdfcomponent。
npm包@mikecousins/react-pdf-js每周有2,646次下载，有497颗GitHub星。
你可以简单地用yarn add @mikecousins/react-pdf或npm install @mikecousins/react-pdf来安装@mikecousins/react-pdf。
最后的想法
在分析了功能、受欢迎程度、安全问题和社区支持之后，我认为pdf查看器库的最佳选择是React-pdf。
考虑到发布版本的模式、版本库的活动以及其他相关数据，React-pdf的维护状况远远领先于其他库。
不过，库的选择可以根据你的要求来改变。我想这篇文章一定会帮助你更多地了解这些库。
谢谢你的阅读......！!
