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:

<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);

        }

        .pop{

            position: absolute;

            left: 50%;

            width: 894px;

            margin-left: -447px;

            z-index: 9;

        }

    </style>

    <script src="Scripts/pdf.js" type="text/javascript"></script>

    <script type="text/javascript">

        function showPdf() {

            var container = document.getElementById("container");

            container.style.display = "block";

            var url = 'Scripts/jQuery经典入门教程(绝对详细).pdf';

            PDFJS.workerSrc = 'Scripts/pdf.worker.js';

            PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {

                pdf.getPage(1).then(function getPageHelloWorld(page) {

                    var scale = 1;

                    var viewport = page.getViewport(scale);

                    var canvas = document.getElementById('the-canvas');

                    var context = canvas.getContext('2d');

                    canvas.height = viewport.height;

                    canvas.width = viewport.width;

                    var renderContext = {

                        canvasContext: context,

                        viewport: viewport

                    };

                    page.render(renderContext);

                });

            });

        }

    </script>

</head>

<body>

    <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a></h1>

    <div id="container" style="display: none;">

        <div class="lightbox"></div>

        <div id="pop" class="pop">

            <canvas id="the-canvas"></canvas>

        </div>

    </div>

</body>

</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>

项目架构：

转自：https://www.cnblogs.com/xiangliuyunyang/p/5956453.html

pdf.js 使用实例的更多相关文章

  1. pdf.js 使用实例（app直接预览pdf格式的文档）

    pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件 pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责 ...

  2. Java实现web在线预览office文档与pdf文档实例

    https://yq.aliyun.com/ziliao/1768?spm=5176.8246799.blogcont.24.1PxYoX 摘要: 本文讲的是Java实现web在线预览office文档 ...

  3. PDF.js Electron Viewer

    PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库,由 Mozilla 主导开源. 本文旨在介绍 PDF.js 于 Electron 里如何开始使用,实际尝试了用其 A ...

  4. 在线浏览PDF之PDF.JS （附demo）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...

  5. 移动端嵌入pdf.js远程请求pdf出现（206）

    最近在做移动端的开发,需要嵌入pdf进行预览.看了很多的js组件后选择了pdf.js:使用起来还是比较方便的,至于使用网上有很多的教程. 但在使用过程中出现了如下一个问题(我做的是IOS系统): 问题 ...

  6. pdf.js pdfdom.js使用（转）

    开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3 ...

  7. pdf.js在IIS中配置使用笔记

    最近在手机App开发Android版本时候遇到需要显示PDF文件的需求,记得之前直接使用系统浏览器或者WebView就可以显示,但是现在不可以了,只能另寻其他办法. 最终找到PDF.JS来进行实现,但 ...

  8. 使用PDF.JS在线查看PDF

    过程简单粗暴. 第一步:下载源码https://github.com/mozilla/pdf.js 第二步:将源码拷贝进项目中,可以新建一个PDFShow文件夹存放代码 第三步:修改viewer.js ...

  9. PDF.js

    http://www.linuxidc.com/Linux/2015-06/118728.htm http://blog.csdn.net/xiangcns/article/details/42089 ...

随机推荐

  1. Github泄露扫描系统

    Github leaked patrol Github leaked patrol为一款github泄露巡航工具: 提供了WEB管理端,后台数据库支持SQLITE3.MYSQL和POSTGRES 双引 ...

  2. 关于throw、throws、try--catch的问题

    首先回顾概念 throws表示出现异常的一种可能性,并不一定会发生这些异常 throw则是抛出了异常,执行throw则一定抛出了某种异常 try--catch try语句用大括号{}指定了一段代码,该 ...

  3. 记录Ocelot + SignalR 多服务端测试

    前言 分两个项目,一个Gatway,一个SignalR 贴代码 1.Gatway 1.引用Ocelot 2.添加一点点代码 Startup.cs 3.简单配置ocelot ocelot.json { ...

  4. 我眼中的 Nginx（五）：Nginx — 子请求设计之道

    张超:又拍云系统开发高级工程师,负责又拍云 CDN 平台相关组件的更新及维护.Github ID: tokers,活跃于 OpenResty 社区和 Nginx 邮件列表等开源社区,专注于服务端技术的 ...

  5. Python爬虫入门教程 55-100 python爬虫高级技术之验证码篇

    验证码探究 如果你是一个数据挖掘爱好者,那么验证码是你避免不过去的一个天坑,和各种验证码斗争,必然是你成长的一条道路,接下来的几篇文章,我会尽量的找到各种验证码,并且去尝试解决掉它,中间有些技术甚至我 ...

  6. [区块链] 拜占庭将军问题 [BFT]

    背景: 拜占庭将军问题很多人可能听过,但不知道具体是什么意思.那么究竟什么是拜占庭将军问题呢? 本文从最通俗的故事讲起,并对该问题进行抽象,并告诉大家拜占庭将军问题为什么在区块链领域作为一个重点研究问 ...

  7. ES 16 - 对Elasticsearch中的索引数据进行增删改查 (CRUD)

    目录 1 创建document 1.1 创建时手动指定id 1.2 创建时自动生成id 2 查看document 2.1 根据id查询文档 2.2 通过_source字段控制查询结果 3 修改docu ...

  8. Java进阶篇设计模式之十一 ---- 策略模式和模板方法模式

    前言 在上一篇中我们学习了行为型模式的访问者模式(Visitor Pattern)和中介者模式(Mediator Pattern).本篇则来学习下行为型模式的两个模式,策略模式(Strategy Pa ...

  9. Android Gradle 依赖配置：implementation & api

    背景: Android Gradle plugin 3.0开始(对应Gradle版本 4.1及以上),原有的依赖配置类型compile已经被废弃,开始使用implementation.api和anno ...

  10. 如何通过get，set方法访问到父类的私有属性

    刚学习继承的时候,总是会有这样的疑问. 子类继承父类时,会继承所有的非私有的属性和方法.那么在用set方法修改父类的私有属性时,怎么没有报空指针异常呢? 后来仔细想过这个问题,既然没有报空指针,那么在 ...