您现在的位置是:首页 > 正文

pdf.js 使用实例

2024-04-01 06:48:21阅读 2

https://www.cnblogs.com/xiangliuyunyang/p/5956453.html

 

 

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

网站文章

  • 【序列推荐】CIKM2020|S3---基于自监督学习的序列推荐模型

    【序列推荐】CIKM2020|S3---基于自监督学习的序列推荐模型

    前言文章发表在2020年CIKM会议上,与以往分享的端到端的模型不同,文章基于互信息最大化(mutual information maximization)原则,提出了一个自监督的序列推...

    2024-04-01 06:48:13
  • 服务器访问系统盘 数据盘,云服务器系统盘数据盘

    服务器访问系统盘 数据盘,云服务器系统盘数据盘

    云服务器系统盘数据盘 内容精选换一换当服务器中的磁盘发生故障、或者由于人为误操作导致服务器数据丢失时,可以使用已经创建成功的备份恢复服务器。云服务器备份仅支持将服务器中的所有云硬盘作为整体进行备份和恢...

    2024-04-01 06:47:28
  • 用动态规划方法求解0-1背包问题

    如果你对动态规划方法求解0-1背包问题的思路不清晰,直接阅读代码并不是一个好的建议。推荐一个B站up主的视频讲解:0/1背包问题-动态规划练习地址(B站视频配套的网址)#include<iostrea...

    2024-04-01 06:47:21
  • IOS Object和javaScript相互调用

    在IOS开发中有时会用到Object和javaScript相互调用,具体步骤如下:1. Object中执行javascript代码,这个比较简单,苹果提供了很好的方法- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script2. javascript执行过程中返回给Object的数据或者调用Obje

    2024-04-01 06:47:15
  • html的浮动作用是什么意思,html中浮动是什么

    html的浮动作用是什么意思,html中浮动是什么

    在HTML中,浮动就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一个元素的外边距,只需要给元素设置“float:left|right|none|inherit”样式即可。本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。一.什么是浮动(float)?浮动就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一...

    2024-04-01 06:46:33
  • 多线程&多进程

    一、线程&进程对于操作系统来说,一个任务就是一个进程(Process),比如打开一个浏览器就是启动一个浏览器进程,打开一个记事本就启动了一个记事本进程,打开两个记事本就启动了两个记事本进程,打开一个Word就启动了一个Word进程。进程是很多资源的集合(进程相当于是一个工厂)。·线程是包含在进程里面的,线程是用来运行干活的,线程就是最小的单位(相当于是工厂里面的工人)· 进程...

    2024-04-01 06:46:26
  • Silverlight/Windows8/WPF/WP7/HTML5周学习导读(7月2日-7月8日)

    Silverlight/Windows8/WPF/WP7/HTML5周学习导读(7月2日-7月8日)

    Silverlight/Windows8/WPF/WP7/HTML5周学习导读(7月2日-7月8日) 本周Silverlight学习资源更新 Silverlight之Window Phone 中SqlCE应用(17) zhaoyu_1979 Silverlight 4系列 +VS2010 + ArcGIS9.3 最短路径分析 wuwangrun

    2024-04-01 06:46:19
  • win10自带计算机应用恢复,win10重置电脑后怎么恢复应用_win10重置后恢复软件的方法...

    win10自带计算机应用恢复,win10重置电脑后怎么恢复应用_win10重置后恢复软件的方法...

    在使用win10操作系统的过程中,我们经常需要通过重置系统来解决一些问题,可是win10重置电脑后怎么恢复应用呢?有许多小伙伴不是很清楚该如何操作,所以对于这一情况,今天系统城小编为大家整理分享的就是...

    2024-04-01 06:46:11
  • Spring Cache 集成 Caffeine实现项目缓存

    Spring Cache 集成 Caffeine实现项目缓存

    一、前言 Spring Cache本身是Spring框架中一个缓存体系的抽象实现,本身不具备缓存能力,需要配合具体的缓存实现来完成,如Ehcache、Caffeine、Guava、Redis等。 二、...

    2024-04-01 06:45:28
  • cookie

    将不同的计算机通过网络应用使用对应的传输介质进行传输物理层、数据链路层、网络层、传输层、会话层、表示层、应用层[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7sSptn...

    2024-04-01 06:45:21