react 移动端基于react-pdf实现pdf预览

react 移动端基于react-pdf实现pdf预览

效果如下

可放大、缩小，翻页

1.封装组件previewPdf.js,组件内有引入4张图片作为操作按钮资源我这里不提供了，如果你有用到这个组件可自己更换一下。

import React, { memo, useEffect, useState } from "react";
import { Document, Page, pdfjs } from "react-pdf";
import { Toast, WhiteSpace } from "antd-mobile";
import "@/assets/styles/preview-pdf.styl";

import icon_previous_page from "@/assets/images/icon_previous_page.png";
import icon_next_page from "@/assets/images/icon_next_page.png";
import icon_zoom_in from "@/assets/images/icon_zoom_in.png";
import icon_zoom_out from "@/assets/images/icon_zoom_out.png";

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

// 加载本地pdf.worker.js
// pdfjs.GlobalWorkerOptions.workerSrc = "/js/pdf.worker.min.js";

const previewPdf = (props) => {
  const { pdfUrl } = props;
  const [pageNumber, setPageNumber] = useState(1);
  const [numPages, setNumPages] = useState(1);
  const [scale, setScale] = useState(0.65);

  useEffect(() => {}, []);
  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }
  //上一页
  function lastPage() {
    if (pageNumber == 1) {
      Toast.info("已是第一页", 2);
      return;
    }
    const page = pageNumber - 1;
    setPageNumber(page);
  }
  //下一页
  function nextPage() {
    if (pageNumber == numPages) {
      Toast.info("已是最后一页", 2);
      return;
    }
    const page = pageNumber + 1;
    setPageNumber(page);
  }
  //缩小
  function pageZoomOut() {
    if (scale <= 0.5) {
      Toast.info("已缩放至最小", 2);
      return;
    }
    let newScale = scale - 0.1;
    setScale(newScale);
  }

  //放大
  function pageZoomIn() {
    if (scale >= 5) {
      return;
    }
    let newScale = scale + 0.1;
    setScale(newScale);
  }

  return (
    <div className="preview-pdf-wrap">
      {/* <NavBar
        mode="light"
        leftContent="返回"
        // icon={<Icon type="left" />}
        onLeftClick={() => window.history.back(-1)}
      ></NavBar> */}
      <WhiteSpace size="xs" />
      <div className="content-wrap">
        <Document file={pdfUrl} onLoadSuccess={onDocumentLoadSuccess}>
          <Page pageNumber={pageNumber} scale={scale} />
        </Document>
      </div>
      <WhiteSpace size="xs" />

      <div className="footer-wrap">
        <div className="pageTool">
          <div className="btn-wrap" onClick={lastPage}>
            <img src={icon_previous_page} alt="" />
          </div>

          <div className="btn-wrap">
            <span className="page-number">
              {pageNumber}/{numPages}
            </span>
          </div>

          <div className="btn-wrap" onClick={nextPage}>
            <img src={icon_next_page} alt="" />
          </div>

          <div className="btn-wrap" onClick={pageZoomIn}>
            <img src={icon_zoom_in} alt="" />
          </div>

          <div className="btn-wrap" onClick={pageZoomOut}>
            <img src={icon_zoom_out} alt="" />
          </div>
        </div>
      </div>
    </div>
  );
};

export default memo(previewPdf);

2.css文件preview-pdf.styl

由于公司使用的是styl格式的样式文件，所以需要使用我的样式你需要调整下格式

.preview-pdf-wrap
    height 100vh
    overflow hidden
    display flex
    flex-direction column
    flex-wrap nowrap
    .content-wrap
        height calc(100% - 112px)
        overflow auto
        .react-pdf__Document
            .react-pdf__Page
                width fit-content
                margin 0 auto
    .footer-wrap
        color #fff
        width 100%
        height 64px
        display flex
        justify-content center
        flex-direction column
        .pageTool
            margin 0 auto
            height 35px
            background #333
            opacity 0.9
            border-radius 16px
            display flex
            flex-wrap nowrap
            justify-content space-around
            width 70%
            .btn-wrap
                flex 1
                display flex
                justify-content center
                align-items center
                img
                    width 22px
                    height 23px

3.使用

'/img/test.pdf' 这个路径是我把pdf放到了public下的

/**pdf预览demo
 *
 */
import PreviewPdf from "../../components/previewPdf";
export default function () {
  return (
    <div>
      <PreviewPdf pdfUrl="/img/test.pdf"></PreviewPdf>
    </div>
  );
}