一、起因

• 有个需求是在线预览pdf的功能，本来用浏览器也能直接预览，所以一开始的思路就是直接加一个<iframe src="url"></iframe>，就完事，结果发现在钉钉上集成三方系统，居然不行，打开后直接是下载，没有预览，只能另想他法。
• 这个时候就发现了react-pdf这个库可以实现

二、实现

• npm i react-pdf

/**
 * 预览文件
 */
import React, { useEffect } from "react"
import { Document, Page, pdfjs } from "react-pdf"


pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cat.net/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`

const ViewFile = () => {
  const [pages, setPages] = useState(0)

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

  return (
      <div style={{ height: "100%", width: "100%", overflowX: "hidden" }} ref={fatherDiv}>
        {/*
          file的值可以是URL、base64、Uint8Array等等，
          loading 加载数据的时候显示的内容
          onLoadSuccess 加载成功后回调的方法，我这里设置了pdf的总页数
          noData：我这里是file没有值时就显示加载的图标<Spin/>
          error 加载错误的时候可以做的
        */}
        <Document
          file={...}
          loading={<div>加载中，请等待!</div>}
          onLoadSuccess={onLoadSuccess}
          noData={
            <div style={{ float: "left", marginLeft: "50%", marginTop: "10%" }}>
              noData
            </div>
          }
          error={() => alert("加载失败，请稍后再试")}
        >
          {/*
            这里滚轮的方式浏览pdf；
            noData={null}：没有值时不显示任何内容
            width={1436} 每一页的宽度
            pageNumber={index} 第几页，可以用pageNumber来做按钮点击实现上一页下一页
          */}
          {new Array(pages + 1).fill("").map((_, index) => {
            return (
              <div key={index}>
                <Page noData={null} width={1000} key={index} pageNumber={index} />
                <br />
              </div>
            )
          })}
        </Document>
      </div>
  )
}

export default ViewFile