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. test--1

    void(document.body.innerHTML.replace(/"return DeletePost\((\d+),([^"]+)\)"/g, functio ...

  2. 记录这段时间java编程的小知识点

    记录这段时间java编程的小知识点 eclipse项目导入中文乱码 eclipse左侧目录结构变动 eclipse代码段左右移动 按tal键,是整体右移. 按shift  table 同时按,是整体左 ...

  3. 字符串的顺序倒置。（Reverse）

    实际遇到的问题:在串口获取码表数据的时候,有的码表传到电脑上的数字顺序是颠倒的,即:123.45,会显示为54.321.需要重新处理数据.方法很多,也不难实现,现在列举其中5个. public str ...

  4. @Autowired注解与@Qualifier注解搭配使用

    问题:当一个接口实现由两个实现类时,只使用@Autowired注解,会报错,如下图所示 实现类1 实现类2 controller中注入 然后启动服务报错,如下所示: Exception encount ...

  5. Properties类

    简介: Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支持的配置文件,配置文件中很多变量是经常改变的,这 ...

  6. Thread类线程结束会唤醒使用其对象做锁而睡眠的线程

    首先回顾一下我们的基础知识. sleep: 线程睡眠,不会释放锁 wait: 线程等待.释放锁. notity: 唤醒随机一个当前对象等待的线程,并不会释放锁 notityAll: 唤醒所有当前对象等 ...

  7. intellij idea 程序包不可见问题

    刚用intellij idea不久,出现了个程序包不可见的问题. 原因:jdk9的问题,用的是jdk9就会出现这个问题. 解决办法:把jsk9换成jdk1.8就能解决.

  8. malloc/free与new/delete的区别与联系

    相同点:(1)都是申请内存,释放内存,free和delete可以释放NULL指针:(2)都必须配对使用,这里的配对使用,可不能理解为一个new/malloc就对应一个delete/free,而是指在作 ...

  9. C# 泛型反射的调用

    namespace ConsoleApplicationFan_fan{ class Program { static void Main(string[] args) { //获取类型 Consol ...

  10. 解决getElementsByClassName（）在IE8下的兼容问题

    getElementsByClassName,这个方法让我们可以通过 class 属性中的类名来访问元素,但是IE9 以下的浏览器不支持 .为解决这个问题,我们写一个兼容函数 getByClass() ...