近期，有一个朋友做B端，服务器存了大量的金融类数据，很多都是pdf文档，他现在的做法是，先将pdf文档转换成flash,再放到浏览器上给用户浏览，但是他告诉我，这种体验太差了，而且很好资源，空间已经快不够了，向我咨询有没有可以直接读取pdf文档的，我之前也没做过，于是，我简单搜索了一下，还真是有，下面给大家整理出来，供大家参考。
pdf.js是一款开源的pdf文档读取解析插件，据说在HTML5下诞生的，对于主流的浏览器基本都支持。
官网GitHub地址如下：https://github.com/mozilla/pdf.js
pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析
比如Demo1，点击连接，可在当前页面打开一个pdf文档，进行预览，代码剖析
1.引入pdf.js
2.解析读取pdf
function showPdf(){
PDFJS.workerSrc = '../build/pdf.worker.js';//加载核心库
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
//
// 获取第一页数据
//
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}3.设置HTML标签
<a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a> <canvas id="the-canvas"></canvas>
4.demo1是通过调用API自己解析，通常，我们直接使用官网的Demo，比如viewer.html，或者Demo2，官方已经为我们设置好了预览的皮肤和各种事件，因此，我只需要将官方的库引进去，会进行本地预览即可。