react 移动端不分页查看pdf

react-pdf官方文档

• 不分页查看pdf文档，代码如下：

import fill from 'lodash/fill';
import get from 'lodash/get';
import React, { useEffect, useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import { withRouter } from 'react-router-dom';
import styles from './index.module.css';

//解决报pdf.worker.js错误
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const PdfPage = withRouter(({ location }) => {
  const [numPages, setNumPages] = useState();

  useEffect(() => {
    console.log('pdf url 链接=====', location.state);
  }, [location]);

  const onDocumentLoadSuccess = (pages: any) => {
    // 获取文件总页数
    setNumPages(get(pages, '_pdfInfo.numPages'));
  };

  return (
    <div className={styles.pdfContainer}>
      <Document
        className={styles.pdfDoc}
        // pdf链接
        file="/test.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
        onLoadError={() => console.log('error')} // 加载失败时调用
        renderMode="canvas" // 定义文档呈现的形式
        externalLinkTarget="_blank"
        loading=""
      >
        {fill(new Array(numPages), '').map((item, index) => {
          return (
            <Page
              loading=""
              noData=""
              className={styles.pageContent}
              width={screen.availWidth}
              key={index}
              pageNumber={index + 1}
              renderTextLayer={true}
            />
          );
        })}
      </Document>
    </div>
  );
});

export default PdfPage;