PDFObject
看官网上的介绍，PDFObject并不是一个PDF渲染工具，它也是通过< embed >标签实现PDF预览：
PDFObject is not a rendering engine. PDFObject just writes an < embed > element to the page, and relies on the browser or browser plugins to render the PDF. If the browser does not support embedded PDFs, PDFObject is not capable of forcing the browser to render the PDF.
PDFObject提供了一个PDFObject.supportsPDFs用于判断该浏览器能否使用PDFObject：
if(PDFObject.supportsPDFs){ console.log("Yay, this browser supports inline PDFs."); } else { console.log("Boo, inline PDFs are not supported by this browser"); }
整个PDFObject使用起来非常简单，完整代码：
code
效果如下：
效果
PDF.js
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
参考：
网友评论