在react中使用react-pdf-js 和 pdfjs-dist的区别和如何使用。以及分页和不分页是怎么处理的

1、首先讲下怎么使用react-pdf-js，以及需要注意的地方

// 引入
import ReactPdf from 'react-pdf-js'
下面如果你想要分页显示的话 https://www.jianshu.com/p/3edb2c1b5ae6 // 看这个就可以了，但是你如果想一页展示的话就需要做下面的操作了
<ReactPdf
　　file={pdffile} // 这个地方是你的pdf文件或者是一个地址（推荐使用文件）
　　onDocumentComplete={this.onDocumentComplete} // 这个是当pdf文件解析完成之后的回调函数，会返回给你一个pdf的总页数
　　page={this.state.page} // 在state中保存的page，这个值可以手动写：1就代表第一页 2就代表第二页...，
/>

// 当pdf文件解析完成之后可以在state中设置page和pages，代表第几页和总页数
onDocumentComplete = (pages) => {
    this.setState({ page: 1, pages })
}
那么我们可以看到 他是支持一页一页展示的，但是如果你想一整页显示出来怎么办。那么我们就需要在render里遍历pages循环生成
1、首先在外层初始化加载一个，用来获取总页数，默认展示第一页。
<ReactPdf
    file={pdfUrl}
    onDocumentComplete={this.onDocumentComplete}
    page={1}
  />
2、获取到pages之后循环生成。另外注意的是index是从0开始，page需要从1开始，所以需要加1，因为上面已经加载过一次page=1的了所以我们就不需要再展示了。
另外要注意如果file传的不是下载好的文件，而是url 的话，会循环请求。解决办法就是先下载下来。不然会非常影响性能。如果请
求时长较短的可以
{
    this.state.pages ? new Array(this.state.pages).fill('').map((item, index) => {
        return index + 1 !== 1 ? (
            <ReactPdf
            　　file={pdfUrl}
        　　　　 page={index + 1}
        />
    ) : ''
    }) : ''
}

ps：样式什么的就需要自己调了。

2、如何在react中使用pdfjs-dist

// 下载和引入npm install pdfjs-dist --save

import 'pdfjs-dist'

// 使用方法

getPdfData = () => {
 let pdfUrl = 'xxx.pdf' || url //同样是pdf文件或者是一个地址

let PDFJS = window.PDFJS // 引入后window中会有这个方法 可以在控制台打印下window看到 // 下面就是解析文件或者url PDFJS.getDocument(pdfUrl).then((pdfDoc_) => { 　　let pdfDoc = pdfDoc_　　// 因为不想要分页所以循环生成canvas   for (let i = 1; i <= pdfDoc.numPages; i++) {　　　　// 因为不知道把pdf解析了多少页，所以我们需要循环创建canvas并且一定要不同的id　　　　let canvas = document.createElement('canvas')　　　　canvas.id = `pdf${i}` 　　　　let ctx = canvas.getContext('2d') 　　　　// 通过getPage的方法获取到每一页的内容渲染，结束后把当前创建的canvas添加到页面中　　　　pdfDoc.getPage(i).then((page) => { 　　　　　　let viewport = page.getViewport(1)　　　　　　let desiredWidth = '1238' 　　　　　　let scale = desiredWidth / viewport.width 　　　　　　let scaledViewport = page.getViewport(scale) 　　　　　　canvas.height = scaledViewport.height 　　　　　　canvas.width = scaledViewport.width 　　　　　　// 进行文件读取加载 　　　　　　let renderContext = { canvasContext: ctx, viewport: scaledViewport, } 　　　　　　page.render(renderContext) }) 　　　　　　// 获取到页面定义好的父元素，把生成的canvas添加进去　　　　　　document.getElementById('pdfList').appendChild(canvas)　　 } }).catch(() => { message.error('pdf加载失败') }) }

如果哪里不对，或者有什么改进的地方 欢迎大家指出来