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. 版本管理工具小乌龟TortoiseGit的安装和使用(1)

    1.软件的安装:1.1 安装 Git使用软件管理工具搜索 Git:

  2. linux 线程详解

    线程 是计算机中独立运行的最小单位,运行时占用很少的系统资源.可以把线程看成是操作系统分配CPU时间的基本单元.一个进程可以拥有一个至多个线程.它线程在进程内部共享地址空间.打开的文件描述符等资源.同 ...

  3. LCT模板（无讲解）

    怎么说呢,照着打一遍就自然理解了,再打一遍就会背了,再打一遍就会推了. // luogu-judger-enable-o2 #include<bits/stdc++.h> using na ...

  4. c#@三种作用

    以前只知道@在C#中为了写文件路径的\不要加转义符而在前面加上@标识符,没想到@还有其他的作用 1.忽略转义字符例如string fileName = "D:\\文本文件\\text.txt ...

  5. case when 和 decode 的比较分析

    一.case when 与 if - else 类似,语句如下:CASE expr WHEN expr1 THEN return_expr1         [WHEN expr2 THEN retu ...

  6. DevExpress v18.2新版亮点——Reporting篇（二）

    行业领先的.NET界面控件——DevExpress v18.2日前正式发布,本站将以连载的形式为大家介绍新版本新功能.本文将介绍了DevExpress Reporting v18.2 的新功能,新版3 ...

  7. Spring4中使用通用Mapper

    1.  在Spring4中使用通用Mapper Spring4增加了对泛型注入的支持,这个特性对通用Mapper来说,非常的有用,可以说有了这个特性,可以直接在Service中写Mapper<U ...

  8. ListBox多列显示,原来比较简单

    数据库的表中,如果有多个列要现实,而对应的是ListBox控件,一般情况下,ListBox是单列显示的, 例如 ListBox1.DataSource = dbcenter.accessGetData ...

  9. 使用Xshell配置外网访问端口

  10. Oracle学习DayOne（SQL初步）

    一.DML.DDL.DCL SQL语句分为以下三种类型: DML: Data Manipulation Language 数据操纵语言DDL: Data Definition Language 数据定 ...