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. jieba 库

    jieba库是python 一个重要的第三方中文分词函数库,但需要用户自行安装. 一.jieba 库简介 (1) jieba 库的分词原理是利用一个中文词库,将待分词的内容与分词词库进行比对,通过图结 ...

  2. python中的turtle库(图形绘画库)

    turtle绘图的基础知识:1. 画布(canvas) 画布就是turtle为我们展开用于绘图区域,我们可以设置它的大小和初始位置. 设置画布大小 turtle.screensize(canvwidt ...

  3. Memory and Trident（CodeForces 712B）

    Description Memory is performing a walk on the two-dimensional plane, starting at the origin. He is ...

  4. Java并发编程阅读笔记-同步容器、工具类整理

  5. 并查集（POJ1182）

    链接:http://poj.org/problem?id=1182 定义一种关系R(x,y),x > y 时 R(x,y) = 2:x = y 时 R(x,y)= 1:x < y 时 R( ...

  6. GAN的入门级理解（按文章顺序）

    1.https://www.leiphone.com/news/201706/ty7H504cn7l6EVLd.html 我的理解:一开始,G网络利用一组随机噪声生成一堆合成的垃圾照片,交给D网络判断 ...

  7. 使用U盘为龙芯笔记本安装操作系统

    摘要:在没有光驱的情况下,可以使用dd命令或者ultraISO软件制作Linux安装U盘,方法适合龙芯和X86.AMD64的设备. 前段时间,由于开发需要,拿到了一部龙芯3A3000的笔记本.出厂的安 ...

  8. L1-062 幸运彩票

    彩票的号码有 6 位数字,若一张彩票的前 3 位上的数之和等于后 3 位上的数之和,则称这张彩票是幸运的.本题就请你判断给定的彩票是不是幸运的. 输入格式: 输入在第一行中给出一个正整数 N(≤ 10 ...

  9. 常见的操作系统及linux发展史

    目前我们常见的操作系统有: 1> 桌面操作系统 Windows 系列 用户群体大 macOS 适合于开发人员 Linux 应用软件少 2> 服务器操作系统 Linux 安全.稳定.免费 占 ...

  10. Vue源码之 diff Vnode

    其实现在这个还没看懂,只能是初步看一下 _update调用__patch__方法,如果prevVnode(也就是oldVnode),旧vnode和新vnode对比,如果没有,就vnode就是vm.$e ...