<!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. Vue学习3：计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. django的url反向解析

    目的:防止页面中url地址改变,其他与这个URL地址有关联的都要改,减少耦合度 使用:主要分为在html中和视图函数中的使用 HTML中的使用: 如果我们在项目的url文件中通过include导入了应 ...

  3. 【转】jenkins自动化部署项目7 -- 新建job（将服务代码部署在windows上）

    关于构建结束后jenkins会kill所有衍生子进程的官方解决方案:https://wiki.jenkins.io/display/JENKINS/Spawning+processes+from+bu ...

  4. js encode方法

    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...

  5. c# 将CSV文件转成list集合

    //定义CSV文件所对应的实体类 public class example { public int t1; public string t2; public string t3; public st ...

  6. Pytrhon结束死循环的子线程

    Python在子线程无线循环的过程中,如果直接ctrl+c结束程序的话,虽然程序可以结束,但是会导致子线程资源无法回收,一般情况不会有太大影响,但是使用TCP通信的时候,子线程是占用特定的端口的,在资 ...

  7. java基础——IO流之File类

    1.File类的构造方法: File(String  pathName):通过一个指定的字符串类型路径来创建一个文件对象 File  (String parent,String child):通过指定 ...

  8. Linux error numbers

    Linux error numbers, straight from the horse's mouth. #define EPERM 1 /* Operation not permitted */ ...

  9. 配置IPV6地址

    题:在考试系统上设定接口eth0使用下列IPV6地址: system1上的地址应该是2003:ac18::305/64 system2上的地址应该是2003:ac18::30a/64 两个系统必须能与 ...

  10. 使用AtomicLong，经典银行账户问题

    1.新建Account类,使用AtomicLong定义账户余额,增加和减少金额方法使用getAndAdd方法. package com.xkzhangsan.atomicpack.bank; impo ...