react预览pdf

pdfjs-dist

js

//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)
          })

tsx

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

2.4版本以上就不兼容苹果和chrome之外的浏览器了，建议降低版本到2.2.228

如果打包时候出现了webpack5的问题，建议在alias里面配置上"url":require(‘/url’)

作者还将pdfjs-dist封装成一个组件 感兴趣的可以看下

封装一个react pdf插件