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

// 引入 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：样式什么的就需要自己调了。

// 下载和引入
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加载失败') }) }