pdf.js实如今HTML下直接浏览pdf文档，无需插件便可实现

近期，有一个朋友作B端，服务器存了大量的金融类数据，不少都是pdf文档，他如今的作法是，先将pdf文档转换成flash,再放到浏览器上给用户浏览，可是他告诉我，这种体验太差了，并且很好资源，空间已经快不够了，向我咨询有没有能够直接读取pdf文档的，我以前也没作过，因而，我简单搜索了一下，还真是有，下面给你们整理出来，供你们参考。

pdf.js是一款开源的pdf文档读取解析插件，听说在HTML5下诞生的，对于主流的浏览器基本都支持。

官网GitHub地址以下：https://github.com/mozilla/pdf.js

因为官网项目文件过多，不太容易理解，所以，我本身针对此项目作了一个简单的Demo，Demo参考地址以下：

1.新窗口浏览pdf文档：http://www.51purse.com/pdf/web/viewer.html?name=b.pdf

2.点击链接读取第一页的pdf文档：http://www.51purse.com/pdf/web/demo1.html

3.点击链接，选择须要打开的文件，进行pdf预览：http://www.51purse.com/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';//加载核心库
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，官方已经为咱们设置好了预览的皮肤和各类事件，所以，我只须要将官方的库引进去，会进行本地预览便可。

若是有人须要代码或者不明白的能够加入PDF群：707875596

做者：慕课讲师/河畔一角

前端基于Vue2.6/小程序/小程序云 + Node.js + MongoDB  全栈的微信支付、微信受权、微信好友/朋友圈分享等全栈课程，欢迎广大前端开发者购买观看

http://coding.imooc.com/class/343.html

前端基于Vue2.0 + Node.js + MongoDB  全栈的慕课网课程，欢迎广大前端开发者购买观看

http://coding.imooc.com/class/113.html

前端基于React16 + React-Router4.0 + Redux +AntD 慕课首门基于共享单车后台通用系统上线了，欢迎广大前端开发者观看

https://coding.imooc.com/class/236.html