【避坑指“难”】全网最全面的-基于React实现PDF预览功能（react-pdf-js VS react-pdf）

由于业务需求，PM让我实现H5直接预览PDF，好家伙，我以为真的就像他说的一样，殊不知，横竖都是二，到处都是坑，真的是“井田”啊！

常见的PDF预览功能主要三个方向来实现：

• 读PDF文件，进行预览展示（通常是XXX.pdf文件）
• 读PDF文件链接，进行预览展示（https://192.168.0.1/mock/downloadPdf?params=xxx）
• 读Base64编码后的PDF，进行预览展示（比较少见，除非业务场景需要）

react-pdf

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

1、安装
npm install react-pdf 或者 yarn add react-pdf

2、代码实现

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
        file="somefile.pdf" //PDF文件在此
        onLoadSuccess={
   onDocumentLoadSuccess}
      >
        <Page pageNumber={
   pageNumber} />
      </Document>
      <p>Page {
   pageNumber} of {
   numPages}</p>
    </div>
  );
}

注意：这里直接读的是PDF文件，如果只有PDF链接地址，可以直接修改file的值，直接设置为链接地址即可，如：file={"http:www.baidu.com"}

3、如何一次性将所有的PDF全部展示出来

对上面的代码稍作修改

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

function MyApp() {
   
  const [numPages, setNumPages]