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. Django 项目搭建(ubuntu系统)

    1 环境搭建 sudo apt-get install python3-pip 安装pip3 sudo pip3 install virtualenv 安装虚拟环境,这里展示virtualenv vi ...

  2. 第十四章——循环神经网络（Recurrent Neural Networks）（第一部分）

    由于本章过长,分为两个部分,这是第一部分. 这几年提到RNN,一般指Recurrent Neural Networks,至于翻译成循环神经网络还是递归神经网络都可以.wiki上面把Recurrent ...

  3. MYSQL—— 完整性约束条件中primary key、auto_increment使用总结！

    完整性约束条件主要有:primary key(主键), auto_increment(自增长), poreign key(外键), not null(非空), unique key(唯一), defa ...

  4. Text-CNN-文本分类-keras

    Text CNN 1. 简介 TextCNN 是利用卷积神经网络对文本进行分类的算法,由 Yoon Kim 在 "Convolutional Neural Networks for Sent ...

  5. 大白话5分钟带你走进人工智能-第十五节L1和L2正则几何解释和Ridge，Lasso，Elastic Net回归

    第十五节L1和L2正则几何解释和Ridge,Lasso,Elastic Net回归 上一节中我们讲解了L1和L2正则的概念,知道了L1和L2都会使不重要的维度权重下降得多,重要的维度权重下降得少,引入 ...

  6. 微服务架构 - SpringBoot整合Jooq和Flyway

    在一次学习分布式跟踪系统zipkin中,发现了jooq这个组件,当时不知这个组件是干嘛的,后来抽空学习了一下,感觉这个组件还挺用的.它主要有以下作用: 通过DSL(Domain Specific La ...

  7. java游戏开发杂谈 - 实现游戏主菜单

    经常玩游戏的同学,大家都知道,游戏都会有个主菜单,里面有多个菜单选项:开始游戏.游戏设置.关于游戏.退出游戏等等,这个菜单是怎么实现的呢. 有一定桌面软件开发基础的同学可能会想到,用JButton组件 ...

  8. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  9. 结合JDK源码看设计模式——观察者模式

    前言: 现在我们生活中已经离不开微信,QQ等交流软件,这对于我们来说不仅是交流,更有在朋友圈中或空间中进行分享自己的生活,同时也可以通过这个渠道知道别人的生活.我们在看朋友圈的时候其实我们扮演的就是一 ...

  10. 『vue踩坑日常』 在index.html中引入静态文件不生效

    Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...