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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。