利用pdf.js开发嵌入pdf显示,以及利用jquery-ui左右分栏显示

原来考虑用pdf.js的viewer.html页面,但怎么用都不方便。因此直接用pdf.js在左侧连续显示pdf所有内容,右侧显示其它相关内容,并且左右宽度可以任意拖动,最终实现效果如图:

代码:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title> 
    <link rel="prefetch" href="/pdfview/test.pdf">
    <style>
        #pdfView > canvas {
            width: 100%;
        }
        .ui-resizable-handle {
            background-color: #699083;
            width: 4px !important;
            right: 0px !important;
        }
        .ui-resizable-e { 
            width: 4px !important;
            right: 0px !important;
        }
    </style>
</head>
<body style="background-color: #ffffff">
          <div style="width: 100%; height: 100%;" id="mainDiv">
            <div style="width: 50%; float: left; height: 100%;" id="resizeBoxLeft">               
                <div id="pdfView" style="width: 100%; height: 100%; overflow: auto; background-color: #ffffff; -webkit-overflow-scrolling: touch;"></div>
            </div>
            <div id="resizeBoxRight" style="width: 50%; float: right; height: 100%; background-color: #ffffff; -webkit-overflow-scrolling: touch;">
               <!---其它内容--->
            </div>
        </div>
    </form>
    <script type="text/javascript" src="/js/jquery/jquery-1.10.2.js"></script>
    <script src="/js/jquery/jquery-ui.js"></script>
    <link rel="stylesheet" href="/js/jquery/jquery-ui.css">
    <script src="build/pdf.js"></script>
    <script type="text/javascript">

        $(function ()
        {
            var url = '../pdfview/test.pdf';
            PDFJS.workerSrc = 'build/pdf.worker.js';
            var scale = 1.5;      
            //逐页创建canvas显示pdf内容     
            PDFJS.getDocument(url).then(function (pdf)
            {                
                var pdfPageCount = pdf.numPages;
                var getPageAndRender = function (pageNumber)
                {
                    pdf.getPage(pageNumber).then(function (page)
                    {
                        var viewport = page.getViewport(scale);
                        var canvas = document.createElement('canvas');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        var renderContext = {
                            canvasContext: canvas.getContext('2d'),
                            viewport: viewport
                        };
                        page.render(renderContext);
                        $("#pdfView").append(canvas);                     
                    });
                    if (pageNumber < pdfPageCount )
                    {
                        pageNumber++;
                        getPageAndRender(pageNumber);
                    }
                }
                getPageAndRender(1);

            });


            $("#resizeBoxLeft").resizable({              
                handles: 'e',              
                start: function() {
                     $("#resizeBoxRight").hide();//拖动时会影响拖动条向右拖动,所以拖动时隐藏,停止拖动再显示。(暂时没想到其它办法)
                },
                stop: function (event, ui)
                {
//计算左右两栏宽度 百分比
                    var rightWidth = $(document).width() - ui.size.width;
                    $("#resizeBoxLeft").css({ "width": parseInt((ui.size.width / $(document).width()) * 100) + "%", "height": "100%" });
                    $("#resizeBoxRight").css({ "width": parseInt((rightWidth / $(document).width()) * 100) + "%", "height": "100%" });
                    $("#resizeBoxRight").show();
                }
            });
        });
    </script>
</body>
</html>


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286650.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

十三、制作 iVX音乐分享小程序

功能介绍 通过前几节的学习&#xff0c;我们对完成一个应用已经有了一些自己的心得。在此再次再制作一个小的音乐小程序应用。该应用一共分为首页、榜单页、音乐分享页和音乐搜索页。 首页&#xff1a; 榜单内容页&#xff1a; 音乐分享页&#xff1a; 音乐搜索页&#xff1a…

01_反射_02_反射类的构造方法

【工程截图】 【Person.java】 //将要被反射的类 package com.Higgin.reflect; import java.util.List;public class Person {private String name"NULL";private int age0;public Person(){System.out.println("构造方法&#xff1a;Person()");}public P…

西北师范大学地理与环境科学学院考研真题汇总(自然地理学)持续更新。。。

西北师范大学地理与环境学科学院研究生入学考试的所有专业(地图学与地理信息系统、自然地理学、人文地理学、环境科学、环境工程)的专业课均为自然地理学,本文持续收集整理历年自然地理学考研入学考试真题。 1998年 一、名词 1. 焚风 2. 径流模数 3. 趋同适应 4. 墨卡托…

Android之提示type checking has run into a recrusive problem. Easiest workaround: specify types of your

1 问题 写kotlin的时候错误提示如下 type checking has run into a recrusive problem. Easiest workaround: specify types of your declarations explicitly 2 分析 我写得是递归函数如下&#xff0c;错误提示就是上面&#xff0c;是因为我们写返回值&#xff0c;才导致 s…

私有云搭建 OpenStack(centos7.3, centos-release-openstack-ocata)

OpenStack&#xff08;centos7.3,centos-release-openstack-ocata&#xff09;nova&#xff1a;计算节点queue&#xff1a;消息队列&#xff0c;系统瓶颈所在scheduler&#xff1a;调度机制conductor&#xff1a;更新数据库cert&#xff08;objectstore&#xff09;&#xff1a…

C# 类继承中的私有字段都去了哪里?

最近在看 C 类继承中的字段内存布局&#xff0c;我就很好奇 C# 中的继承链那些 private 字段都哪里去了? 在内存中是如何布局的&#xff0c;毕竟在子类中是无法访问的。一&#xff1a;举例说明 为了方便讲述&#xff0c;先上一个例子&#xff1a;internal class Program{stati…

大型分布式网站架构技术总结

本文是学习大型分布式网站架构的技术总结。对架构一个高性能&#xff0c;高可用&#xff0c;可伸缩&#xff0c;可扩展的分布式网站进行了概要性描述&#xff0c;并给出一个架构参考。一部分为读书笔记&#xff0c;一部分是个人经验总结。对大型分布式网站架构有很好的参考价值…

python 数据分析找到老外最喜欢的中国美食【完整代码】

一、环境及依赖 语言&#xff1a;python3.8 抓取&#xff1a;selenium 代理&#xff1a;ipide **注&#xff1a;**想要完整代码的在末尾&#xff0c;注意新手建议慢慢看完。在此提示一下本篇文章的编写步骤&#xff1a;1.获取数据、2.翻译、3.数据清洗、4.切词词权重、5.词云 …

Android之检查跳转的Activity是否存在

1、需求 android我们知道经常会跳各种设置页面,比如设置默认浏览器页面、设置添加快捷方式权限页面,我们会根据机型进行适配,但是有时候如果找到也找个页面不try catch操作程序会奔溃 2、检查跳转的Activity是否存在代码实现 public static boolean hasActivity(Context co…

hihoCoder 1257 Snake Carpet(很简单的构造方法)

2015 ACM / ICPC 北京现场赛 I 题 构造 注意一个小坑&#xff0c;每条蛇的输出是要从头到尾输出的。 还要注意的是&#xff0c;不能开数组去模拟构造过程&#xff0c;然后输出&#xff0c;那样会TLE的。 #include <cstdio> #include <cstring> #include <cmath&…

西北师范大学地理与环境科学学院考研真题汇总(高等数学)持续更新。。。

西北师范大学地理与环境学科学院研究生入学考试的所有专业(地图学与地理信息系统、自然地理学、人文地理学、环境科学、环境工程)的数学均为自主命题,复习参考教材为同济大学第五版。

操作系统与多核处理器

这篇文章解答了我心中的疑问&#xff0c;那就是操作系统会自动调度cpu资源来处理多进程&#xff0c;多线程的并发。早在上世纪90年代末&#xff0c;就有众多业界人士呼吁用CMP(单芯片多处理器)技术来替代复杂性较高的单线程CPU。IBM、惠普、Sun等高端服务器厂商&#xff0c;更是…

Java网络编程二:Socket详解

Socket又称套接字&#xff0c;是连接运行在网络上两个程序间的双向通讯的端点。 一、使用Socket进行网络通信的过程 服务端&#xff1a;服务器程序将一个套接字绑定到一个特定的端口&#xff0c;并通过此套接字等待和监听客户端的连接请求。 客户端&#xff1a;客户端程序根据你…

Android之提示Could not find com.android.support:appcompat-v7:25.3.1.

1 问题 编译第三方项目&#xff0c;错误提示如下 Could not find com.android.support:appcompat-v7:25.3.1. Required by:project :sampleproject :sample > com.yanzhenjie:permission:1.0.7project :sample > com.yanzhenjie.alertdialog:alertdialog:1.0.1 Search …

在 .NET 中使用 FixedTimeEquals 应对计时攻击

计时攻击 在计算机安全中&#xff0c;计时攻击&#xff08;Timing attack&#xff09;是旁道攻击 &#xff08;Side-channel attack&#xff09; 的一种&#xff0c;而旁道攻击是根据计算机处理过程发出的信息进行分析&#xff0c;包括耗时&#xff0c;声音&#xff0c;功耗等…

解读大型网站系统架构的演化

解读大型网站系统架构的演化 大型网站的架构是根据业务需求不断完善的&#xff0c;根据不同的业务特征会做特定的设计和考虑&#xff0c;本文只是讲述一个常规大型网站会涉及的一些技术和手段。作者&#xff1a;李平来源&#xff1a;LEE的博客前言 一个成熟的大型网站&#xff…

【ArcGIS风暴】西北地区气象台站年均NDVI与年均气温和降水的相关性分析

在研究植被动态变化与气候的关系时,通常通过计算植被NDVI值与气温和降水的相关系数来描述相关性的大小。如下图所示,计算了西北地区分布的气象台站与气温和降水的相关性并作图可视化。 下面详细说明整个实现过程。 一、计算相关系数 1. 原理分析 通过计算年均N…

python 全解坦克大战 辅助类 附完整代码【雏形】

我正在博客之星评选&#xff0c;欢迎投票给我 会从投票人中抽奖机械键盘书&#xff0c;中了会私聊地址 投票连接是&#xff1a;https://bbs.csdn.net/topics/603955346 投票连接是&#xff1a;https://bbs.csdn.net/topics/603955346 投票连接是&#xff1a;https://bbs.csdn.…

vc++ mfc中拖动效果的实现 借助于CImageList

拖动是界面编程频繁使用的一个效果&#xff0c;在windows系统下可谓大行其道。纵观时下的应用软件几乎各个都支持各种各样拖动的效果&#xff0c;windows7更是把拖动做到了极致。其实说起来拖动的实现也很简单&#xff0c;对于有句柄的对象都可以通过MoveWindow或SetWindowPos实…

从浏览器地址栏输入url到显示页面的步骤

从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)- 在浏览器地址栏输入URL- 浏览器查看缓存&#xff0c;如果请求资源在缓存中并且新鲜&#xff0c;跳转到转码步骤 - 如果资源未缓存&#xff0c;发起新请求 - 如果已缓存&#xff0c;检验是否足够新鲜&#xff0c;足够…