牛逼! 像展示图片一样便捷的预览 PDF 文件

哈喽，大家好！我是前端实验室的小师妹!

「前端实验室」 专注分享 Github、Gitee等开源社区优质的前端项目、前端技术、前端学习资源以及前端资讯等各种有趣实用的前端内容。

PDF 文档的预览功能在日常项目开发中很常见,那么如何快速实现一个 PDF 文档在线预览的功能呢?

这款React-PDF组件你值得拥有!

React-PDF

React-pdf提供了一个 React 组件API，允许打开PDF文件并使用PDF.js渲染,在 React 应用程序中显示 PDF，像展示图片一样便捷的预览 PDF 文件.

虽然 React-pdf 只是一个PDF查看的库,但却也有着其他强大的功能:

• 易于使用 - 插入Document组件并给它一个文件道具。React-pdf会把它整理出来，不管它是一个URL，一个文件，还是base64。

• 支持自定义事件。

• 多种渲染方法。

• 支持文本选择和注释。

• 跨浏览器兼容性。

• 可访问性 - React-pdf不仅将PDF渲染成图像。还可以作为屏幕阅读器可以掌握的可见文本层，使你的内容对视力障碍者来说更可用。

安装

新建 react项目,初始化后添加react-pdf依赖

npm install react-pdf 
or
yarn add react-pdf
or 
pnpm install react-pdf

基本用法

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';  # 插件引入

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

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

  return (
    <div>
      #文件引入,在Document里层添加<Page/> 
      <Document file="somefile.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
}

上述只是简单的PDF文件显示,你还可以添加上下翻页，放大缩小，窗口全屏，以及页码跳转功能以及对样式的美化等功能~

React-pdf每周有超过40W+次的下载和6.6K颗GitHub星，这表明这个库在React社区是多么受欢迎。

有需要这个功能的小伙伴可以尝试使用,没有的话收藏一波,万一哪天产品就提出这么个需求呢~

项目地址

项目名称：React-pdf
Star：6.6K
Github：https://github.com/wojtekmaj/react-pdf
官网：https://projects.wojtekmaj.pl/react-pdf/