<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>浏览器打开PDF</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="pdf.js"></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>

				<center><a href="introduce.pdf" target="pdfContainer" onclick="showPdf(true)">打开PDF</a></center>

		<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;font-size: 28px;font-weight: bold;color: black;top:150px;

		" id="close">关闭</a>

			<iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer"></iframe>

		</div>

	</body>

</html>

　　

浏览器中打开PDF链接的更多相关文章

  1. [置顶] 如何在浏览器中打开PDF文件并实现预览的思路与代码

    编写项目遇到一个需要在浏览器中打开PDF文件的问题.最终实现效果如下: 其实也就是简单的在浏览器中实现一个打开pdf文件,并有类似预览功能的边框. 其实在网上经常见到类似的页面,在浏览器中打开pdf文 ...

  2. MVC自定定义扩展点之ActionNameSelectorAttribute+ActionFilterAttribute 在浏览器中打开pdf文档

    仅仅演示 了ASP.MVC 5 下为了在在浏览器中打开pdf文档的实现方式之一,借此理解下自定义ActionNameSelectorAttribute+ActionFilterAttribute 类的 ...

  3. SharePoint 2013在浏览器中打开pdf文档

    在没有安装Office Web Apps的情况下,SharePoint 2013是支持在IE上直接打开pdf和Excel文档的(只能查看,不能编辑,部分Excel会报错). 当然,需要现在管理中心做一 ...

  4. 微信下载app需要点击右上角在浏览器中打开下载的问题

    很多朋友是不是遇到过这样的问题,自家的app通过微信推广没办法直接下载,而是需要通过一个遮罩层来提示用户下载. 点击下载按钮提示点击右上角在浏览器中打开 这样的方式下载一个app是不是需要点击下载按钮 ...

  5. Android 通过URL scheme 实现点击浏览器中的URL链接，启动特定的App，并调转页面传递参数

    点击浏览器中的URL链接,启动特定的App. 首先做成HTML的页面,页面内容格式如下: <a href="[scheme]://[host]/[path]?[query]" ...

  6. 微信打开网址添加在浏览器中打开提示 http://caibaojian.com/weixin-tip.html

    原文链接:http://caibaojian.com/weixin-tip.html#t2 使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等.网上流传的各种微信打开下载链接,微信已更新基 ...

  7. 浏览器中打开IOS应用并传参

    原创文章,转载请注明 开发中遇到这么一个问题,就是动态地指定联接服务器地址,或其它数据.如果是其它数据还好说一些,可以通过在服务器上获得的方式来弄.但如果服务器地址都需要动态指定的话.那就得另想办法了 ...

  8. web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

    https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开   <style typ ...

  9. js判断是否是在微信浏览器中打开

    // js判断是否是在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/Mi ...

随机推荐

  1. Sketchup （待续）

    Sketchup插件 来自20个最好用的SketchUp插件 https://www.bilibili.com/video/av17242031/?from=search&seid=15336 ...

  2. 运输计划NOIP2015Day2T3

    运输计划 题目描述 公元 2044 年,人类进入了宇宙纪元. L 国有 n 个星球,还有 n-1 条双向航道,每条航道建立在两个星球之间,这 n-1 条 航道连通了 L 国的所有星球. 小 P 掌管一 ...

  3. Mysql 版本号、存储引擎、索引查询

    [1]Mysql 版本号.存储引擎.索引查询 # 查看数据库版本号 SELECT VERSION(); # 查看数据库支持的引擎(默认即Support == DEFAULT行) SHOW ENGINE ...

  4. 《Whitelabel Error Page 404》 对于Springboot初学者可能出现问题的原因

    whitelabel error page异常一定是有原因的,比如,访问路径不对,解析不对,注解忘记引入等.对于初学者,一定要注意一点,程序只加载Application.java所在包及其子包下的内容 ...

  5. left join on +多条件与where区别

    left join on +多条件与where区别 重点 先匹配,再筛选where条件. 本文将通过几个例子说明两者的差别. 1. 单个条件 select * from product a left ...

  6. sai u 2016

    再过20分钟,我就要结束2016年的工作回家过春节了.真是难过的一天啊,从来没有今天那么感受深刻,那么嫌弃时间太慢,没有归家心似箭,没有近乡情怯,只是好想,呵呵,来个午睡,来场电影,来点小说,哈哈哈. ...

  7. Linux环境下部署开源版“禅道”方法

    1.开源版安装包下载(Linux系统版本查看命令 uname -a) 32位 [root@iZbp~]# wget http://dl.cnezsoft.com/zentao/9.0.1/ZenTao ...

  8. iOS进阶之如何进行 HTTP Mock（转载）

    这篇文章会对 OHHTTPStubs 源代码的分析,其实现原理是建立在 NSURLProtocol 的基础上的,对这部分内容不了解的读者,可以阅读这篇文章 iOS 开发中使用 NSURLProtoco ...

  9. 无序hashset与hashmap让其有序

    今天迭代hashmap时,hashmap并不能按照put的顺序,迭代输出值.用下述方法可以: HashMap<String,String> hashmap = new LinkedHash ...

  10. HttpRequest,HttpResponse,乱码,转发和重定向

    HttpServletRequest简介 Web服务器收到客户端的http请求,会针对每一次请求,创建一个用于代表请求的HttpServletRequest类型的request对象,并将"H ...