react预览pdf

    //pdf控制页码，用来渲染canvas和绑定对应的id
    const [pdfNum, setPdfNum] = useState(0)
    const pdf = require('pdfjs-dist')
        pdf.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
        pdf
          .getDocument(fileUrl)
          .promise.then((pdfDocument) => {
          //渲染个数，绘画出空的canvas
            setPdfNum(pdfDocument.numPages)
            for (let i = 1; i <= pdfDocument.numPages; i++) {
            //读取每一页的信息
              pdfDocument.getPage(i).then((pdfPage) => {
              //绘制canvas
              //找出适配屏幕大小的宽度
                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") as CanvasRenderingContext2D
                const ctx = canvas.getContext('2d')
                const renderTask = pdfPage.render({
                  canvasContext: ctx,
                  viewport,
                })
                return renderTask.promise
              })
            }
    
          })
          .catch((err) => {
            console.log(err)
          })

    //简单的渲染 id要不同
    new Array(pdfNum)
            .fill(0)
            .map((item, index) => <canvas id={'canvasDom' + (index + 1)} key={index} />)