2021年值得关注的ReactPDF库

大家好，我是小义。分享的内容是2021年顶级ReactPDF库。2021年顶级ReactPDF库如今，许多Web应用程序为其用户提供内置的PDF浏览选项。然而，选择一个并不容易，因为它们不仅仅显示PDF。因此，在这篇文章中，我将评估React的5个PDF查看器库并进行功能比较，以帮助您选择最适合您的需求的库。主要介绍以下5个库：react-pdf/rendererreact-pdf@phuocng/react-pdf-viewerreact-file-viewer@mikecousins/react-pdfreact-pdf/rendererreact-pdf/renderer专门用于渲染和创建PDF.React-pdf/renderer是一个广泛使用的库，用于在浏览器和服务器上创建PDF文件。地址：https://www.npmjs.com/package/@react-pdf/renderer这个库提供了一些开始工作的基本组件，当你熟悉后，你可以自定义它们以得出更有吸引力的设计：文档：这个是要匹配的PDF文件的根目录。页面：此标签描述单个页面。它需要有一定的尺寸（比如A4）。视图：用于样式化和格式化PDF的通用容器。您可以使用StyleSheet.create()API通过Flexbox和CSS属性的全部功能为您的视图设置样式以布局PDF，类似于它在ReactNative中的使用方式。Text：用于显示文字。图片：可用于在PDF文档中插入图片。链接：可用于生成超链接注释。此外，React-pdf/renderer具有一些令人惊叹的功能，可用于生成令人惊叹的文档。我可以很容易地列出其中的一些特性：支持各种样式和CSS属性。使用usePDFhookAPI更好地控制您的文档。提供节点API。快速高效。高度可定制且易于使用。除此之外，React-pdf/renderer库每周约有93,000次下载，在GitHub上的星数超过9.3k。您可以使用npminstall-save@react-pdf/renderer命令轻松地将这个库安装到您的项目中，下面的代码显示了一个使用React-pdf/renderer的简单示例。importReactfrom'react';import{Document,Page,Text,View,StyleSheet}from'@react-pdf/renderer';//Createstylesconststyles=StyleSheet.create({page:{flexDirection:'row',backgroundColor:'#C0C0C0'},section:{margin:10,padding:10,flexGrow:1}});//CreatePdfComponentconstMyPdf=()=>(Heading#1Heading#2);react-pdf像图像一样显示PDF。我们之前讨论的React-pdf/renderer专门用于创建PDF。但是，如果您正在寻找一个只显示PDF的库，那么React-pdf是您的不二之选。地址：https://www.npmjs.com/package/react-pdfReact-pdf提供了一个React组件API，允许使用PDF.js打开和渲染PDF文件。尽管这是一个专门用于查看PDF的简单库，但它具有一些惊人的功能，例如：易于使用-插入文档组件并为其提供文档属性。React-pdf会把它整理出来，无论是URL、文件还是base64。支持自定义事件。各种渲染方法。支持文本选择和注释。跨浏览器兼容性。辅助功能——React-pdf不只是将PDF渲染成图像。还充当屏幕阅读器可以掌握的可见文本层，使您的内容对视障人士更有用。免费和开源。除此之外，每周有超过296,000次下载和4.6KGitHub星数，可见该库在React社区中的流行程度。你可以使用npmireact-pdf命令安装它，下面的例子展示了React-pdf的基本用法。importReact,{useState}from'react';import{Document,Page}from'react-pdf';functionMyPdf(){const[numPages,setNumPages]=useState(null);const[pageNumber,setPageNumber]=useState(1);functiononDocumentLoadSuccess({numPages}){setNumPages(numPages);}return(

);}exportdefaultMyPdf;@phuocng/react-pdf-viewer@phuocng/react-pdf-viewerReact-pdf-viewer是一个完全由Reacthooks驱动的React组件，写的在打字稿中。尽管是新的，但React-pdf-viewer有一些令人兴奋的功能，会让您大吃一惊。为了更好地理解，我将它们列举如下：支持密码保护的文件。缩放：支持自定义级别，例如实际大小、页面适合度和页面宽度。页面之间的导航。搜索文本。预览页面缩略图。查看和浏览目录。列出并下载附件。旋转和许多滚动模式。文本选择和手动工具模式。全屏模式。可以打开本地文件（例如拖放本地文件以查看它。下载文件并打印。查看文件属性。支持SSR。此外，它的插件集合是完全可定制的，可以帮助用户提供出色的文档。文档：https：//react-pdf-viewer.dev/docs/首次发布才一年时间，就已经有超过2000周的下载量和519个GitHubstar。注意：需要有React16.8+和TypeScript3.8以上版本才能使用React-pdf-viewer，可以使用npmi@phuocng/react-pdf-viewer命令安装，下面的例子展示了React-pdf-viewer的基本用法。//Coreviewerimport{Viewer}from'@react-pdf-viewer/core';//Pluginsimport{defaultLayoutPlugin}from'@react-pdf-viewer/default-layout';//Importstylesimport'@react-pdf-viewer/core/lib/styles/index.css';import'@react-pdf-viewer/default-layout/lib/styles/index.css';//CreatenewplugininstanceconstdefaultLayoutPluginInstance=defaultLayoutPlugin();react-file-viewerReact-file-viewer是一个可扩展的web应用文件查看器，支持PDF、image、csv、xslx和docx。这个库提供了一个名为FileViewer的组件来显示内容，它接受几个属性：fileTypeString：要显示的资源类型。如果您使用不受支持的文件类型，则会出现不受支持的文件类型通知。filePath字符串：FileViewer将显示的资源的URL。onError函数[可选]：如果文件查看器无法获取或呈现请求的资源，将调用此函数。您可以在此处为日志记录工具指定回调。errorComponentreactelement[可选]：发生错误时要呈现的组件，而不是react-file-viewer的默认错误组件。unsupportedComponentreactelement[可选]：如果不支持文件格式，则要呈现的组件。除此之外，它还有一些特殊功能，例如：使用Jest或Enzyme进行测试。通过使用makelint运行linter来节省时间，甚至在我们运行代码之前捕获错误。可扩展性——添加支持的文件类型很容易。此外，这是最受欢迎的pdf查看器库之一，每周有17348次下载和291个GitHubStars。注意：该库在React16+中运行良好。如果你使用React<16，你很可能需要安装React-file-viewer版本0.5。React-file-viewer可以通过npmireact-file-viewer命令安装，下面的例子展示了React-file-viewer的一个简单例子：//MyApp.jsimportReact,{Component}from'react';importloggerfrom'logging-library';importFileViewerfrom'react-file-viewer';import{CustomErrorComponent}from'custom-error';constfile='http://mysite.com/sampledoc.pdf'consttype='pdf'classMyDocComponenttextendsComponent{render(){return();}onError(e){logger.logError(e,'errorinfile-viewer');}}@mikecousins/react-pdf@mikecousins/react-pdf是一个使用PDF.js渲染PDF文档的组件。这个库使用一个叫做usePdf的Hook来渲染PDF，我们需要使用这个Hook来传递几个属性：file：PDF文件的URL。Page：表示要显示的页面。默认值=1。scal：允许您缩放PDF。默认值=1。onDocumentLoadSuccess：可以定义一个回调函数，在PDF文档数据加载完成后调用。onDocumentLoadFail：允许您定义一个回调函数，该函数将在发生PDF文档数据加载错误时调用。onPageLoadSuccess：让您定义一个回调，该回调将在加载PDF页面数据后调用。onPageRenderSuccess：让您定义一个回调，在PDF页面完全渲染到DOM后执行。如果您认为这工作量太大，您可以直接使用Pdfcomponent，它在内部使用usePdf挂钩。importReact,{useState}from'react';importPdffrom'@mikecousins/react-pdf';constMyPdfViewer=()=>{const[page,setPage]=useState(1);return;};npmpackage@mikecousins/react-pdf-js每周有2,646次下载和497个GitHub星。您可以简单地使用yarnadd@mikecousins/react-pdf或npminstall@mikecousins/react-pdf安装@mikecousins/react-pdf。综上所述，我们来看看他们的具体下载量：来源：https://www.npmtrends.com/来源：https://www.npmtrends.com/在分析了功能、流行度、安全问题和社区支持后，我认为pdf查看器库的最佳选择是React-pdf。考虑到发布模式、存储库活动和其他相关数据，React-pdf的维护状态远远领先于所有其他库。但是，可以根据您的要求更改库的选择。我认为这篇文章一定会帮助您更多地了解这些库。