React中使用pdfjs（一）

项目准备

搭建react项目

用create-react-app创建一个新的react项目

npx create-react-app my-app

下载pdfjs

npm install pdfjs-dist --save

PDF加载

导入pdfjs库

pdfjs-dist/webpack是已经对pdfjs打包过的文件，不使用可能出现的问题

import pdfjsLib from 'pdfjs-dist/webpack'; 

加载PDF返回PDF对象

对PDF的获取处理等全部都是异步操作

const pdf = await pdfjsLib.getDocument('http://xxx/xxx.pdf')

获取PDF每页的对象

在回调中获取PDF每页的对象，并将其内容渲染到canvas中

for (let _page = 1; _page <= pdf._pdfInfo.numPages; _page++) {  
    pdf.getPage(_page).then((page) => {  
        // page.getViewport 设置缩放倍率
        const viewport = page.getViewport({scale: 1})  
        const canvas = document.createElement('canvas')  
        const context = canvas.getContext('2d')  
        canvas.height = viewport.height  
        canvas.width = viewport.width  
        const renderContext = {  
            canvasContext: context,  
            viewport: viewport,  
            enableWebGL: true,  
        }  
        // page.render将内容渲染到canvas中，
        // page.render也会返回一个对象，对象有更详细渲染信息，其中包括渲染好的canvas对象，但这个canvas并不是上文声明的，不可控
        // const _canvas = page.render(renderContext)  
        page.render(renderContext)  
        this.pageRenderRef.current.appendChild(canvas)  
    });  
}

完整代码

import React, {Component} from "react";  
import pdfjsLib from 'pdfjs-dist/webpack';  

export default class PDFViewer extends Component {  
    constructor(props) {  
        super(props)  
        this.pageRenders = []   // 存放每页pdf形成的canvas
        this.pageRenderRef = React.createRef()  /渲染pdf的容器
    }
    
    componentDidMount() {  
        this.init()  
    }
    
    init = async () => {  
        console.time('pdf加载时间')  
        const pdf = await pdfjsLib.getDocument('http://xxx/xxx.pdf')  
        console.timeEnd('pdf加载时间')  
        const {_pdfInfo: {numPages}} = pdf  
  
        for (let _page = 1; _page <= numPages; _page++) {  
            pdf.getPage(_page).then((page) => {  
                const viewport = page.getViewport({scale: 1})  
                const canvas = document.createElement('canvas')  
                const context = canvas.getContext('2d')  
                canvas.height = viewport.height  
                canvas.width = viewport.width  
                const renderContext = {  
                    canvasContext: context,  
                    viewport: viewport,  
                    enableWebGL: true,  
                }  
                page.render(renderContext)  
                this.pageRenderRef.current.appendChild(canvas)  
            });  
        }  
    }
    
    render() {  
        return (  
            <div ref={this.pageRenderRef}>  
            {  
                    this.pageRenders.length > 0 && this.pageRenders  
            }  
            </div>  
        )  
    }  
}

直接导入pdfjs出现的问题

• 不容易找到pdf.worker.js
  pdf.worker.js是pdfjs解析库，使用时需要在pdfjs对象上指定属性workerSrc=pdf.worker.js
• 内存使用过高
  即使在module找到了，也还可能报high memory的错误
  错误原因issue上已经提到了