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. c#基础之异常处理及自定义异常

    一.什么是c#中的异常? 异常是程序运行中发生的错误,异常处理是程序的一部分.c#中的异常类主要是直接或者间接的派生于 System.Exception类 ,也就是说System.Exception类 ...

  2. 第二章01：Hello world 案例

    java程序开发 = 三部曲 源文件+编译器+字节码文件+解释器=结果 源文件:编写Java源文件(我们也称之为源代码文件),它的扩展名为.java: 编译:然后通过编译器把源文件编译成字节码文件,字 ...

  3. h264文件分析(纯c解析代码)

    参考链接:1. 解析H264的SPS信息 https://blog.csdn.net/lizhijian21/article/details/80982403               2. h.2 ...

  4. 报表工具highcharts使用心得

    公司让做一个报表页面,搜索了下发现highcharts比较符合业务需求,下面就说一下使用心得. $('#container').highcharts({ title: { text: '部门统计图' ...

  5. Javase系列之面向对象（一）

    作为一个Java程序员,我们每天做的事情就是OOP(面向对象),可以说万物皆对象,Java是一门面向对象的程序语言,鉴于基本的面向对象知识也是一个较为庞杂的模块,所以博主我准备用多篇文章去介绍Java ...

  6. react native进一步学习（NavigatorIOS 学习）

    特别申明:本人代码不作为任何商业的用途,只是个人学习的一些心得,为了使得后来的更多的程序员少走一些弯路.*(如若侵犯你的版权还望见谅)*. 开发工具:WebStorm,xcode 1. rn的创建的时 ...

  7. linux - man 提示：-bash: man: command not found

    在执行man命令时,提示:-bash: man: command not found 原因1:没有配置path环境 解决:vi /etc/profile JAVA_HOME=/usr/java/jdk ...

  8. Visitor 模式心得

    最近读到Visitor模式,还是一知半解的.偶然翻到Uncle Bob对该模式的推导过程,有所心得,和大家分享一下. Uncle Bob 的链接是: http://butunclebob.com/Ar ...

  9. SharePoint Framework解决方案管理参考(一)

    博客地址:http://blog.csdn.net/FoxDave 使用SPFx,你的企业可以轻松构建解决方案跟Office 365和SharePoint Online集成.SPFx解决方案基于现代w ...

  10. 问题1：Oracle数据库监听启动失败（重启监听，提示The listener supports no services）

    编辑监听文件:/home/DB/oracle/11gR2/db/network/admin/listener.ora 在文件内添加静态监听实例,如下内容: SID_LIST_LISTENER =(SI ...