react-PDf 使用

npm i -s react-pdf@5.3.0

不要下最新版本,会在本地化的时候编译报错

用CDN远程加载的就没有版本报错问题

react版本  17.0.1
react-pdf 6+版本,在本地加载
// 本地加载
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

会编译报错

TypeError: /jenkins/workspace/cah-docker-dev/web/node_modules/pdfjs-dist/build/pdf.worker.js: Cannot read properties of null (reading 'scope')  
at Array.filter (<anonymous>)

就是在引入  pdf.worker.js  会报错

/**
 * 预览文件
 */
import React, { useEffect, useState } from "react"
import { Document, Page, pdfjs } from "react-pdf"
import { Empty } from 'radp'
import './viewPDF.less'
// 本地加载
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

// CDN 远程加载
// pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;


const ViewPDF = ({ fileContent, width, height }) => {
    const [pages, setPages] = useState(1)

    //numPages 是pdf文件的总页数
    const onLoadSuccess = ({ numPages }) => {
        setPages(numPages)
    }

    return (
        <div className="pdf_document" style={{height: height || 700}} >
        {/*
          file的值可以是URL、base64、Uint8Array等等，
          loading 加载数据的时候显示的内容
          onLoadSuccess 加载成功后回调的方法，我这里设置了pdf的总页数
          noData：我这里是file没有值时就显示加载的图标<Spin/>
          error 加载错误的时候可以做的
        */}
            <Document
                file={fileContent}
                loading={<div className="loading">正在努力加载中!</div>}
                onLoadSuccess={onLoadSuccess}
                noData={
                    <Empty description="暂无报告" />
                }
            >
        {/*
            这里滚轮的方式浏览pdf；
            noData={null}：没有值时不显示任何内容
            width={1436} 每一页的宽度
            pageNumber={index} 第几页，可以用pageNumber来做按钮点击实现上一页下一页
          */}
                {new Array(pages).fill("").map((_, index) => {
                    return (
                        <div key={index}>
                            <Page noData={null} width={width || 1090} key={index} renderTextLayer={false} renderAnnotationLayer={false} pageNumber={index + 1} />
                            <br />
                        </div>
                    )
                })}
            </Document>
        </div>
    )
}

export default ViewPDF