欢迎光临
我的个人博客网站

在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加载失败') }) }

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » 在react中使用react-pdf-js 和 pdfjs-dist的区别和如何使用。以及分页和不分页是怎么处理的
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏