pdf.js实现在HTML下直接浏览pdf⽂档，⽆需插件即可实现
近期，有⼀个朋友做B端，服务器存了⼤量的⾦融类数据，很多都是pdf⽂档，他现在的做法是，先将pdf⽂档转换成flash，再放到浏览器上给⽤户浏览，但是他告诉我，这种体验太差了，⽽且很好资源，空间已经快不够了，向我咨询有没有可以直接读取pdf⽂档的，我之前也没做过，于是，我简单搜索了⼀下，还真是有，下⾯给⼤家整理出来，供⼤家参考。
pdf.js是⼀款开源的pdf⽂档读取解析插件，据说在HTML5下诞⽣的，对于主流的浏览器基本都⽀持。
官⽹GitHub地址如下：github/mozilla/pdf.js
由于官⽹项⽬⽂件过多，不太容易理解，因此，我⾃⼰针对此项⽬做了⼀个简单的Demo，Demo参考地址如下：
1.新窗⼝浏览pdf⽂档：www.51purse/pdf/web/viewer.html?name=b.pdf
2.点击连接读取第⼀页的pdf⽂档：www.51purse/pdf/web/demo1.html
3.点击连接，选择需要打开的⽂件，进⾏pdf预览：www.51purse/pdf/web/demo2.html
pdf.js主要包含两个库⽂件，⼀个pdf.js和⼀个pdf.worker.js，，⼀个负责API解析，⼀个负责核⼼解析
⽐如Demo1，点击连接，可在当前页⾯打开⼀个pdf⽂档，进⾏预览，代码剖析
1.引⼊pdf.js
2.解析读取pdf
function showPdf(){
PDFJS.workerSrc = '../build/pdf.worker.js';//加载核⼼库
//
// 获取第⼀页数据
//
var scale = 1.5;
html实现用户注册登录代码var viewport = Viewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = ElementById('the-canvas');
var context = Context('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
});
});
}
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，官⽅已经为我们设置好了预览的⽪肤和各种事件，因此，我只需要将官⽅的库引进去，会进⾏本地预览即可。
如果有⼈需要代码或者不明⽩的可以加⼊PDF：707875596
作者：慕课讲师/河畔⼀⾓
前端基于Vue2.6/⼩程序/⼩程序云 + Node.js + MongoDB 全栈的⽀付、授权、好友/朋友圈分享等全栈课程，欢迎⼴⼤前端开发者购买观看
前端基于Vue2.0 + Node.js + MongoDB 全栈的慕课⽹课程，欢迎⼴⼤前端开发者购买观看
前端基于React16 + React-Router4.0 + Redux +AntD 慕课⾸门基于共享单车后台通⽤系统上线了，欢迎⼴⼤前端开发者观看
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论