在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加載失敗') }) }

如果哪里不對，或者有什么改進的地方 歡迎大家指出來