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" οnclick="showPdf()">显示pdf文档</a>

<canvas id="the-canvas"></canvas>

4.demo1是通过调用API自己解析,通常,我们直接使用官网的Demo,比如viewer.html,或者Demo2,官方已经为我们设置好了预览的皮肤和各种事件,因此,我只需要将官方的库引进去,会进行本地预览即可。

如果有人需要代码或者不明白的可以加入前端开发群:326936159

或者给我发邮件进行咨询:sunnyboysoft@163.com


展开阅读全文
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值