React在线预览PDF文件

最新推荐文章于 2024-09-15 02:44:39 发布

小林犟

最新推荐文章于 2024-09-15 02:44:39 发布

阅读量2.5k

点赞数

分类专栏： React 文章标签： react.js pdf javascript

本文链接：https://blog.csdn.net/weixin_41387351/article/details/130204107

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

因为webpack 3版本太低无法兼容最新版react-pdf: ^6.2.2，经过尝试发现 5.2.0版本可以正常运行

环境：webpack: 3.10.0、react: 16.14.0、react-pdf: 5.2.0

一、安装 react-pdf

npm i react-pdf@5.2.0

二、引入页面

import React, { useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

function MyApp() {
  const [numPages, setNumPages] = useState(null); //pdf的总页数
  const [pageNumber, setPageNumber] = useState(1); //正在阅读的页码

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document file={ preViewPath } onLoadSuccess={onDocumentLoadSuccess} error='加载预览文件失败' loading='加载中，请稍候...'>
        <Page scale={1.5} pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
}

三、分页展示效果图

在这里插入图片描述

四、一次性展示效果图

在这里插入图片描述

创建一个长度为总页数numPages的数组进行map遍历，用index做页数，因为index等于0，因此index+1
缺点：pdf页数过多会出现性能问题，可以自行考虑加载方法（例如每滑动十页再进行下面十页的加载）

  return (
    <div>
      <Document file={ preViewPath } onLoadSuccess={onDocumentLoadSuccess} error='加载预览文件失败' loading='加载中，请稍候...'>
	  { 
		new Array(numPages).fill('').map((item, index) => (
			<Page className='mb24' scale={1.5} key={ index } pageNumber={ index + 1 } /> 
		)) 
	  } 
      </Document>
    </div>
  );

五、react-pdf pdf.worker.js报错

1、官网提供实例

pdf.worker.min.js是国外 CDN 托管，国内访问不稳定（不推荐）

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

2、从本地引入（推荐）

import { pdfjs } from 'react-pdf';
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;