2021年最值得关注的React PDF 库

2021-06-23  本文已影响0人  千千默默

2021年最值得关注的React PDF 库

以下文章来源于TianTianUp ，作者小弋

2021 年顶级 React PDF 库

图片

今天，许多网络应用程序为其用户提供内置的PDF浏览选项。然而，选择一个并不容易，因为它们的功能远远超过显示PDF。

因此，在这篇文章中，我将评估5个React的PDF浏览器库，并进行功能比较，以帮助你选择最适合你要求的。

主要介绍下面5个库：

react-pdf/renderer

图片

<figcaption style="margin: 5px 0px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; text-align: center; color: rgb(60, 140, 255); font-size: 14px;">react-pdf/renderer</figcaption>

专门用于渲染和创建PDF。

React-pdf/renderer是一个广泛使用的库，用于在浏览器和服务器上创建PDF文件。

地址：https://www.npmjs.com/package/@react-pdf/renderer

这个库提供了一些基本的组件来开始工作，随着你的熟悉，你可以定制它们来提出更吸引人的设计:

另外，React-pdf/renderer带有一些惊人的功能，可以用来生成令人惊叹的文档。我可以很容易地列出其中的一些功能:

除了这些，React-pdf/renderer库每周有大约93,000次下载，GitHub上有超过9.3k颗星星。

你可以使用npm install - save @react-pdf/renderer命令轻松地将这个库安装到你的项目中，下面的代码显示了一个使用React-pdf/renderer的简单例子。

import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#C0C0C0'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

// Create Pdf Component
const MyPdf = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Heading #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Heading #2</Text>
      </View>
    </Page>
  </Document>
);

react-pdf

像显示图片一样显示PDF。

我们之前讨论过的React-pdf/renderer是专门用于创建PDF的。但如果你正在寻找一个只显示PDF的库，React-pdf是最佳选择。

地址：https://www.npmjs.com/package/react-pdf

React-pdf提供了一个React组件API，允许打开PDF文件并使用PDF.js渲染。虽然这是一个专门用于查看PDF的简单库，但它有一些惊人的功能，比如:

除此以外，每周有超过296,000次的下载和4.6K颗GitHub星，这表明这个库在React社区是多么受欢迎。

你可以使用npm i react-pdf命令来安装它，下面的例子显示了React-pdf的基本用法。

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';

function MyPdf() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document
        file="myfile.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>Page {pageNumber} of {numPages}</p>
    </div>
  );
}
export default MyPdf;

@phuocng/react-pdf-viewer

图片

React-pdf-viewer是一个完全由React钩子驱动的React组件，用TypeScript编写。

尽管是新的，React-pdf-viewer有一些令人兴奋的功能，让你为之倾倒。为了更好地理解，我将把它们列举如下：

另外，它的插件集合是完全可定制的，并以优秀的文档帮助用户。

文档：https://react-pdf-viewer.dev/docs/

从它首次发布到现在只有一年时间，它已经有超过2000次的每周下载和519颗GitHub星。

注意：你需要有React 16.8以上版本和TypeScript 3.8以上版本才能使用React-pdf-viewer。

你可以使用npm i @phuocng/react-pdf-viewer命令来安装它，下面的例子展示了React-pdf-viewer的基本用法。

// Core viewer
import { Viewer } from '@react-pdf-viewer/core';

// Plugins
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';

// Import styles
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';

// Create new plugin instance
const defaultLayoutPluginInstance = defaultLayoutPlugin();

<Viewer
    fileUrl='/my Documents/sample_doc.pdf'
    plugins={[
        // Register plugins
        defaultLayoutPluginInstance,
        ...
    ]}
/>

react-file-viewer

React-file-viewer是一个可扩展的文件查看器，用于Web应用程序，支持PDF、图片、csv、xslx和docx。

这个库提供了一个名为FileViewer的组件，用来显示内容，它接受几个props:

除此以外，它还有一些特殊的功能，比如:

此外，这也是最受欢迎的pdf查看器库之一，每周有17348次下载和291个GitHub Stars。

注意：这个库在React 16以上版本中功能良好。如果你使用React< 16版本，你很可能需要安装React-file-viewer 0.5版本。

React-file-viewer可以用npm i react-file-viewer命令安装，下面的例子显示了React-file-viewer的一个简单例子:

// MyApp.js
import React, { Component } from 'react';
import logger from 'logging-library';
import FileViewer from 'react-file-viewer';
import { CustomErrorComponent } from 'custom-error';

const file = 'http://mysite.com/sampledoc.pdf'
const type = 'pdf'

class MyDocComponent extends Component {
  render() {
    return (
      <FileViewer
        fileType={type}
        filePath={file}
        errorComponent={CustomErrorComponent}
        onError={this.onError}/>
    );
  }

  onError(e) {
    logger.logError(e, 'error in file-viewer');
  }
}

@mikecousins/react-pdf

@mikecousins/react-pdf是一个使用PDF.js来渲染PDF文档的组件。

这个库使用一个叫做usePdf的Hook来渲染PDF，我们需要用这个Hook传递几个props:

如果你认为这工作太多，你可以简单地直接使用Pdfcomponent，它在内部利用usePdf钩子。

import React, { useState } from 'react';
import Pdf from '@mikecousins/react-pdf';
 
const MyPdfViewer = () => {
  const [page, setPage] = useState(1);
 
  return <Pdf file="sampledoc.pdf" page={page} />;
};

npm软件包@mikecousins/react-pdf-js每周有2,646次下载，有497颗GitHub星。

你可以简单地用yarn add @mikecousins/react-pdf或npm install @mikecousins/react-pdf来安装@mikecousins/react-pdf。

小结

我们来看看他们具体的下载量：

Source: https://www.npmtrends.com/

图片

<figcaption style="margin: 5px 0px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; text-align: center; color: rgb(60, 140, 255); font-size: 14px;">Source: https://www.npmtrends.com/</figcaption>

Source: https://www.npmtrends.com/

图片

<figcaption style="margin: 5px 0px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; text-align: center; color: rgb(60, 140, 255); font-size: 14px;">Source: https://www.npmtrends.com/</figcaption>

在分析了功能、流行度、安全问题和社区支持之后，我认为pdf查看器库的最佳选择是React-pdf。

考虑到发布版本的模式、软件库活动和其他相关数据，React-pdf的维护状况远远领先于其他所有库。

上一篇下一篇

猜你喜欢

热点阅读