react中实现预览pdf功能(react-pdf-js)

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

安装依赖:cnpm install react-pdf-js
效果如下 :
react中实现预览pdf功能(react-pdf-js)_第1张图片

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;
    } 

你可能感兴趣的:(javaScript,react,javascript,react.js,前端)