封装一个react pdf预览组件

这里我们用的是函数组件+pdfjs的api+hooks进行封装

直接上代码

import React, {
    
     useState, useEffect } from 'react'
import pdf from 'pdfjs-dist'
import workerSrc from 'pdfjs-dist/build/pdf.worker.entry'
pdf.GlobalWorkerOptions.workerSrc = workerSrc
      
//配置参数路由 和成功失败回调
const Pdf = ({
    
    
  fileUrl = '',
  successFunction,
  errorFunction,
}: {
    
    
  fileUrl: string
  successFunction?: () => void
  errorFunction?: () => void
}) => {
    
    
//渲染的canvas个数
  const [pdfNum, setPdfNum] = useState(0)

  useEffect(() => {
    
    
    pdf.getDocument(fileUrl)
    .promise
    .then((pdfDocument) => {
    
    
    //设置canvas个数
        setPdfNum(pdfDocument.numPages)
        if (typeof successFunction === 'function') successFunction()
        for (let i = 1; i <= pdfDocument.numPages; i++) {
    
    
          pdfDocument.getPage(i).then((pdfPage) => {
    
    
          //设置缩小倍数
            const vp = pdfPage.getViewport({
    
     scale: 1.0 })
            const viewport = pdfPage.getViewport({
    
     scale: window.innerWidth / vp.width })
            const canvas: any = document.getElementById('canvasDom' + i)
            if (!canvas) {
    
    
              // eslint-disable-next-line prefer-promise-reject-errors
              return Promise.reject()
            }
            canvas.width = viewport.width
            canvas.height = viewport.height
            const ctx = canvas.getContext('2d')
            const renderTask = pdfPage.render({
    
    
              canvasContext: ctx,
              viewport,
            })
            return renderTask.promise
          })
        }
      })
      .catch((err) => {
    
    
        if (typeof errorFunction === 'function') errorFunction()
        console.log(err)
      })
  }, [fileUrl])

  return (
    <>
      {
    
    new Array(pdfNum).fill(0).map((item, index) => (
        <canvas id={
    
    'canvasDom' + (index + 1)} key={
    
    index} />
      ))}
    </>
  )
}
export default Pdf

怎么样，是不是很容易