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. greenplum中to_date函数注意点

    今天协助排查异常数据,发现是如下类似代码产生的: to_date(col_name,'yyyymmdd'),其中col_name是date类型. 这个代码运行后,结果是:2018-11-16的date ...

  2. spring mvc将对象转换为json返回的配置

    之前在spring 3中用的好好的MappingJacksonHttpMessageConverter转换器,将对象转为json响应给浏览器,在spring4中,报错. Cannot create i ...

  3. 阿里云已买到域名价格统计js代码

    var sum = 0; $('.table-hover tr.ng-scope').each(function(){ sum = sum + parseInt($(this).children()[ ...

  4. MySQL索引的原理，B+树、聚集索引和二级索引的结构分析

    索引是一种用于快速查询行的数据结构,就像一本书的目录就是一个索引,如果想在一本书中找到某个主题,一般会先找到对应页码.在mysql中,存储引擎用类似的方法使用索引,先在索引中找到对应值,然后根据匹配的 ...

  5. Python3 open函数

    Python open() 方法用于打开一个文件,并返回文件对象,在对文件进行处理过程都需要使用到这个函数,如果该文件无法被打开,会抛出 OSError. 注意:使用 open() 方法一定要保证关闭 ...

  6. MinHook测试分析02 （x64）

    在X64模式中,存在的问题是JMP指令和整个地址空间相比仅仅覆盖了很窄的范围.因此引入一个中继函数(Relay Function)来实现对64位Detour函数地址的跳转. 在hook的分析之前,先谈 ...

  7. 几个常用内核函数（《Windows内核情景分析》）

    参考:<Windows内核情景分析> 0x01  ObReferenceObjectByHandle 这个函数从句柄得到对应的内核对象,并递增其引用计数. NTSTATUS ObRefer ...

  8. IT技术

    一.通信网络 TCP/IP协议 路由交换技术 二.编程语言 C/C++ python JAVA 三.数据库 关系型数据库 (1)MySQL  MySQL学习笔记一 MySQL学习笔记二 2.  非关系 ...

  9. Problem 10: Summation of primes

    def primeslist(max): ''' 求max值以内的质数序列 ''' a = [True]*(max+1) a[0],a[1]=False,False for index in rang ...

  10. chrome恢复默认搜索引擎为Google

    管理员身份运行cmd RD /S /Q "%WinDir%\System32\GroupPolicyUsers" RD /S /Q "%WinDir%\System32\ ...