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. 【CTF 攻略】CTF比赛中关于zip的总结

    [CTF 攻略]CTF比赛中关于zip的总结   分享到: --> 本文首发于安全客,建议到原地址阅读,地址:http://bobao.360.cn/ctf/detail/203.html 前言 ...

  2. LSTM实现中文文本情感分析

    1. 背景介绍 文本情感分析是在文本分析领域的典型任务,实用价值很高.本模型是第一个上手实现的深度学习模型,目的是对深度学习做一个初步的了解,并入门深度学习在文本分析领域的应用.在进行模型的上手实现之 ...

  3. mybatis入门系列三之类型转换器

    mybatis入门系列三之类型转换器 类型转换器介绍 mybatis作为一个ORM框架,要求java中的对象与数据库中的表记录应该对应 因此java类名-数据库表名,java类属性名-数据库表字段名, ...

  4. 从壹开始前后端 [vue后台] 之一 || 权限后台系统 1.0 正式上线

    缘起 哈喽各位小伙伴周三好,春节已经过去好多天了,群里小伙伴也各种催搞了,新年也接了新项目,比较忙,不过还是终于赶上这个二月的尾巴写了这篇文章,也把 vue 权限后台上线了(项目地址:http://1 ...

  5. 使用Rotativa在ASP.NET Core MVC中创建PDF

    在本文中,我们将学习如何使用Rotativa.AspNetCore工具从ASP.NET Core中的视图创建PDF.如果您使用ASP.NET MVC,那么Rot​​ativa工具已经可用,我们可以使用 ...

  6. Asp.NetCore轻松学-部署到 Linux 进行托管

    前言 上一篇文章介绍了如何将开发好的 Asp.Net Core 应用程序部署到 IIS,且学习了进程内托管和进程外托管的区别:接下来就要说说应用 Asp.Net Core 的特性(跨平台),将 .Ne ...

  7. Java线程状态间的互相转换

    ava中线程的状态分为6种. 1. 初始(NEW):新创建了一个线程对象,但还没有调用start()方法. 2. 运行(RUNNABLE):Java线程中将就绪(ready)和运行中(running) ...

  8. Java关于读取Excel文件~xlsx xls csv txt 格式文件~持续汇总~

    所需的jar百度网盘链接:https://pan.baidu.com/s/146mrCImkZVvi1CJ5KoiEhQ提取码:c329 1 需要导入jar包,缺1不可 dom4j-1.6.1.jar ...

  9. appium-desktop定位元素原理

    初衷 最近在编写Android App自动化用例,其中元素定位相对来说耗费的时间比较长.我们都知道Appium-desktop拥有自己的录制功能,我们就在想是不是可以把录制功能跟我司的自动化框架(AT ...

  10. 集群环境下Shiro Session的管理

    问题引入 紧接上篇连接 在多台tomcat集群中,shiro管理的session需要放在Redis中,我们只需要增加redisSessionDAO的配置就行 <!-- 定义会话管理器的操作 表示 ...