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. python获取当前时间

    import time time = time.strftime('%Y-%m-%d %H:%M:%S',time.localtime()) print("当前时间:",time) ...

  2. 操作系统--进程管理（Processing management）

    一.进程的组成 进程通常由程序.数据和进程控制块(Process Control Block,PCB)组成. 二. 进程的状态以及状态切换 进程执行时的间断性决定了进程可能具有多种状态,最基本的三种状 ...

  3. Postman----安装Newman

    Newman是为Postman而生,专门用来运行Postman编写好的脚本.Newman安装步骤: 1.需要安装node.js,并配置好环境 2.打开控制台,运行:npm install -g new ...

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

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

  5. 【ODI】| 数据ETL：从零开始使用Oracle ODI完成数据集成（二）

    前一节已经完成了Oracle数据库和ODI的安装,并已经为ODI在Oracle数据库中创建了两个用户,分别用于存放主资料库数据和工作资料库数据,在ODI中完成主资料库和工作资料库的创建,也分别为其创建 ...

  6. Asp.Net Core 轻松学-多线程之Task快速上手

    前言     Task是从 .NET Framework 4 开始引入的一项基于队列的异步任务(TAP)模式,从 .NET Framework 4.5 开始,任何使用 async/await 进行修饰 ...

  7. 对于一个WEB前端初学者，学前端应该注意，有什么技巧

    web前端经验总结需要注意的地方和技巧如下: 1.编程思维 学习web前端开发核心在于一个“编程思维”,因为每段代码都不一样,都需要分别去看,所以只要你掌握了学习web前端的编程思维,那么写程序对于你 ...

  8. 如何在新工程中添加两个不同版本的的echarts库

    emmmmm.....标题我就觉得起的很变态.闲话不多说,先说出现的背景吧--. 因为业务上的需求,跟一个硬件对接,要做大屏展示大厅客流热力图分布(背景图是客户那边给的).然后这个机子传过来的数据就可 ...

  9. 常见文本类css属性

    学习web的第六天 p{ font-size:18px;  /*文本尺寸*/ font-family:"隶书";  /*文本字体*/ font-weight:bold;    /* ...

  10. git相关的操作

    给大家分享下git的使用心得,有不足的请大家补充: 克隆:git clone https://XXXXX 克隆指定分支:git clone -b https://XXXX 添加所有:git add . ...