pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件

pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析

下载地址:http://cnblogs.com/files/xiangliuyunyang/build.zip

两个主要demo

1.点击连接读取第一页的pdf文档:http://www.51purse.com/pdf/web/demo1.html(此处没有自己上传)

2.点击连接,选择需要打开的文件,进行pdf预览:http://www.51purse.com/pdf/web/demo2.html(此处没有自己上传)

参考代码:

demo1:

 1 <html>
2 <head>
3 <meta charset="UTF-8">
4 <title>Document</title>
5 <style type="text/css">
6 .lightbox{
7 position: fixed;
8 top: 0px;
9 left: 0px;
10 height: 100%;
11 width: 100%;
12 z-index: 7;
13 opacity: 0.3;
14 display: block;
15 background-color: rgb(0, 0, 0);
16 }
17 .pop{
18 position: absolute;
19 left: 50%;
20 width: 894px;
21 margin-left: -447px;
22 z-index: 9;
23 }
24 </style>
25 <script src="Scripts/pdf.js" type="text/javascript"></script>
26 <script type="text/javascript">
27 function showPdf() {
28 var container = document.getElementById("container");
29 container.style.display = "block";
30 var url = 'Scripts/jQuery经典入门教程(绝对详细).pdf';
31 PDFJS.workerSrc = 'Scripts/pdf.worker.js';
32 PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
33 pdf.getPage(1).then(function getPageHelloWorld(page) {
34 var scale = 1;
35 var viewport = page.getViewport(scale);
36 var canvas = document.getElementById('the-canvas');
37 var context = canvas.getContext('2d');
38 canvas.height = viewport.height;
39 canvas.width = viewport.width;
40 var renderContext = {
41 canvasContext: context,
42 viewport: viewport
43 };
44 page.render(renderContext);
45 });
46 });
47 }
48 </script>
49 </head>
50 <body>
51 <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a></h1>
52 <div id="container" style="display: none;">
53 <div class="lightbox"></div>
54 <div id="pop" class="pop">
55 <canvas id="the-canvas"></canvas>
56 </div>
57 </div>
58 </body>
59 </html>

demo2:

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.lightbox{
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 7;
opacity: 0.3;
display: block;
background-color: rgb(0, 0, 0);
display: none;
}
.pop,iframe{
position: absolute;
left: 50%;
top:0;
width: 893px;
height: 100%;
margin-left: -446.5px;
z-index: 9;
}
</style>
<script src="Scripts/pdf.js" type="text/javascript"></script>
<script type="text/javascript">
function showPdf(isShow) {
var state = "";
if (isShow) {
state = "block";
} else {
state = "none";
}
var pop = document.getElementById("pop");
pop.style.display = state;
var lightbox = document.getElementById("lightbox");
lightbox.style.display = state;
}
function close() {
showPdf(false);
}
</script>
</head>
<body>
<ul>
<li><a href="Scripts/jQuery经典入门教程(绝对详细).pdf" target="pdfContainer" onclick="showPdf(true)">0001_pdf</a></li>
</ul>
<div class="lightbox" id="lightbox"></div>
<div id="pop" class="pop" style="display: none;">
<a href="javascript:close()" style="
position: absolute;
right: -90px;
display: inline-block;
width: 80px;
height: 30px;
" id="close">关闭</a>
<iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer"></iframe>
</div>
</body>
</html>

项目架构:

pdf.js 使用实例(app直接预览pdf格式的文档)的更多相关文章

  1. 【Js应用实例】图片预览

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Java实现在线预览Word,Excel,Ppt文档

    效果图:

  3. 在线预览word,excel文档

    Google Doc 示例:https://jsfiddle.net/7xr419yb/ Microsoft Office 示例:https://jsfiddle.net/gcuzq343/

  4. js下载后台返回的docx(返回格式:文档流)文件

    原文地址: https://www.jianshu.com/p/a81c68c15fbd PS需要指定responseType类型,不然文件内容会乱码哦 咦?文件名乱码?需要手动设置文件名哦↓ 呀,文 ...

  5. 在其他app里预览文档

    本文转载至 http://www.cocoachina.com/newbie/basic/2013/0515/6212.html iOS中的沙盒可以让平台更加的安全,这也是沙盒给用户带来的最主要好处. ...

  6. 在线预览PDF

    FlexPaper+SWFTool+操作类=在线预览PDF   引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf ...

  7. 前端实现在线预览pdf、word、xls、ppt等文件

    最近在做一个公司的资源管理系统,一些知识小记一下. 1.前端实现pdf文件在线预览功能 方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下 ...

  8. 关于pc端 app端pdf,word xls等文件预览的功能

    第一种用H5标签<iframe>标签实现 返回的文件类型,文件流,文件流返回必须在设置 contentType对应的Mime Type, 返回文件的物理位置. 已经实测可以支持的文件类型 ...

  9. html页面预览pdf文件使用插件pdfh5.js

    html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...

随机推荐

  1. PDF 补丁丁 0.6.1.3498 版重大更新:为文本PDF文档自动生成书签!

    新的 PDF 补丁丁开放了内部测试了很久的好用功能——自动书签. 这个功能可以在一分钟内快速生成文本型 PDF 文档的书签(说明:本功能分析文档中的文本,生成标题,故对扫描版的 PDF 文档无效). ...

  2. 路由导航之第一个子模块(HomeModule)

    git clone git@github.com:len007/my-angular2-app.git my-angular2-app 开始 一个URL = 一个页面 = 一个Component. 我 ...

  3. SiteMesh3简介及使用

    所属专栏: Java开发经验记录   最近项目用到SiteMesh3,研究学习一段时间后决定写篇博文来记录收获. SiteMesh SiteMesh 介绍 工作原理 配置及使用 下载 1添加maven ...

  4. 在Ubuntu14.04上配置jdk环境

    服务器环境:Ubuntu14.04 server 1.进入oracle官网下载jdk1.7.0_71_x64.gz  重命名为jdk1.7 2.使用tar -xvf  jdk1.7.0_71_x64. ...

  5. java多线程面试中常见知识点

    1.进程和线程 (1)进程是资源分配的最小单位,线程是程序执行的最小单位. (2)进程有自己的独立地址空间,每启动一个进程,系统就会为它分配地址空间,建立数据表来维护代码段.堆栈段和数据段,这种操作非 ...

  6. 北航OO第二单元总结

    电梯调度的设计策略 第一次作业是单部多线程傻瓜电梯 这次作业的电梯名副其实是一部傻瓜电梯,每次只能运一个人.出于线程安全的考虑,选择了阻塞队列.然后按照先来先服务的原则服务下一个指令.没有什么复杂的设 ...

  7. OO第四次作业总结

    一:测试与正确性论证的效果差异 首先,测试和正确性论证都是对程序的可靠与否,是否有误进行测试,从整体上来看,测试多偏向于实践,而正确性论证则大多偏向于理论. 测试:测试首先是构造一组测试样例,之后将程 ...

  8. Redis操作1

    本文章内容节选自<PHP MVC开发实战>一书第16.4.2章节. 一.概述 Redis是一个NoSQL数据库,由于其数据类型的差异,所以要在MVC框架中实现CURD操作,比较繁锁.事实上 ...

  9. Ubuntu 18.04安装VNC远程登录

    reference: https://blog.csdn.net/bluewhalerobot/article/details/73649353 https://community.bwbot.org ...

  10. Problem B: 一切皆对象

    Description 一切都是对象 —— Everything is an object. 所以,现在定义一个类Thing,来描述世界上所有有名字的事物.该类只有构造函数.拷贝构造函数和析构函数,并 ...