PDFPageProxy

 

PDF.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件，非常强大，能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。 

首先引入pdf.js文件 

PDF.js大部分用法都是基于Promise的，PDFJS.getDocument(url)方法返回的就是一个Promise：

PDFJS.getDocument('../index.pdf').then(pdf=>{

        var numPages = pdf.numPages;

        var start = 1;

        renderPageAsync(pdf, numPages, start);

    });

Promise返回的pdf是一个PDFDocumentProxy对象官网API介绍是：

Proxy to a PDFDocument in the worker thread. Also, contains commonly used properties that can be read synchronously.

PDF的解析工作需要通过pdf.getPage(page)去执行，这个方法返回的也是一个Promise，因此可以通过async/await函数去逐页解析PDF：

async function renderPageAsync(pdf, numPages, current){

        for(let i=1; i<=numPages; i++){

            // 解析page

            let page = await pdf.getPage(i);

            // 渲染

            // ...        }

    }

得到的page是一个PDFPageProxy对象，即Proxy to a PDFPage in the worker thread 。这个对象得到了这一页的PDF解析结果，我们可以看下这个对象提供的方法：

 

我们可以试试调用getTextContent方法，并将其结果打印出来：

page.getTextContent().then(v=>console.log('page', v));

第一页部分结果如下：

 

我们可以发现，PDF.js将每页文本的字符串、位置、字体都解析出来，感觉还是挺厉害的。

PDF.js是Mozilla实验室的作品，感觉真的很强大！ 

我在码云上有个demo，结合了PDFObject和PDF.js。因为PDFObject使用的< embed >标签可以直接显示PDF文件，速度很快；但是手机上很多浏览器不支持，比如微信的浏览器、小米浏览器，所以我就使用了PDF.js将其渲染成Canvas，速度与PDFObject相比慢多了，但至少能看。-_-!!

https://github.com/imyuran/pdf_item

 

 

作者：雨伞不挡雨

链接：https://www.jianshu.com/p/37c3f9fac4b4

來源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。