react中实现预览pdf功能（react-pdf-js）

使用的是react Hook写法，文件是直接引入的pdf文件，也可以识别base64数据格式

安装依赖：cnpm install react-pdf-js
效果如下 ：

import React, { memo, useCallback, useState } from "react";
//react预览pdf文件插件
import PDF from "react-pdf-js";
import pdfs from "/bestFirends.pdf"; // 这里直接引入的pdf文件
import "./index.less";

export default memo(() => {
  const [pages, setPages] = useState({ page: 1, allPages: 1 });

  const getAllPages = useCallback(
    (pageNums) => {
      setPages((prev) => ({ ...prev, allPages: pageNums }));
    },
    [pages]
  );

  const nextPage = useCallback(
    (type) => {
      let currentPage = pages["page"];
      if (type == "next") {
        // 如果是下一页
        if (currentPage == pages["allPages"]) {
          alert("已经是最后一页了");
        } else {
          setPages((prev) => ({ ...prev, page: currentPage + 1 }));
        }
      } else {
        // 如果是上一页
        if (currentPage == 1) {
          alert("已经是第一页了");
        } else {
          setPages((prev) => ({ ...prev, page: currentPage - 1 }));
        }
      }
    },
    [pages]
  );

  return (
    <div> 
      <p>
        <button onClick={() => nextPage("up")}>上一页</button>
        <span>
          {pages["page"]}/{pages["allPages"]}页
        </span>
        <button onClick={() => nextPage("next")}>下一页</button>
      </p> 
        <PDF
          file={pdfs} //文件地址
          onDocumentComplete={getAllPages}
          page={pages["page"]} //文件页码
        /> 
    </div>
  );
});

---

扩展：

提示：展示全部页面和调接口处理为base64：

 const [blob, setBlob] = useState(null);
  const [pdfblob, setPdfBlob] = useState(null);
  
  useEffect(() => {	//重点在此！！！！！如何将PDF文件流转base64
    fetchData({
        url:'填接口地址噢',
        method: 'get',
        responseType: 'blob', //必写！
        params:{
          number: number, // 接口传参
        }
      }).then((res)=>{
        setBlob(res.data)
        let reader = new FileReader();
        reader.readAsDataURL(res.data); // 转换为base64，可以直接放入a标签href
        reader.addEventListener("load", function () {
            let base64 = reader.result as string
            setPdfBlob(base64.split(',')[1]) 
        });
      })
  }, []);
  //史诗级重点！不进行异常处理会报错！全网找不到的！
  
  let newpdfblob = "data:application/pdf;base64,"+pdfblob
  if(!pdfblob) return null 

   全部展示
  function directlyRenderPdf(nums: number){
      const x = [];
      for (let i = 2; i <= totalPage; i++)
        x.push(<PDF page={i} key={`x${i}`} file={newpdfblob} scale={0.61}/>);
      return x;
    }