浏览器中打开PDF链接
<!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链接的更多相关文章
- [置顶] 如何在浏览器中打开PDF文件并实现预览的思路与代码
编写项目遇到一个需要在浏览器中打开PDF文件的问题.最终实现效果如下: 其实也就是简单的在浏览器中实现一个打开pdf文件,并有类似预览功能的边框. 其实在网上经常见到类似的页面,在浏览器中打开pdf文 ...
- MVC自定定义扩展点之ActionNameSelectorAttribute+ActionFilterAttribute 在浏览器中打开pdf文档
仅仅演示 了ASP.MVC 5 下为了在在浏览器中打开pdf文档的实现方式之一,借此理解下自定义ActionNameSelectorAttribute+ActionFilterAttribute 类的 ...
- SharePoint 2013在浏览器中打开pdf文档
在没有安装Office Web Apps的情况下,SharePoint 2013是支持在IE上直接打开pdf和Excel文档的(只能查看,不能编辑,部分Excel会报错). 当然,需要现在管理中心做一 ...
- 微信下载app需要点击右上角在浏览器中打开下载的问题
很多朋友是不是遇到过这样的问题,自家的app通过微信推广没办法直接下载,而是需要通过一个遮罩层来提示用户下载. 点击下载按钮提示点击右上角在浏览器中打开 这样的方式下载一个app是不是需要点击下载按钮 ...
- Android 通过URL scheme 实现点击浏览器中的URL链接，启动特定的App，并调转页面传递参数
点击浏览器中的URL链接,启动特定的App. 首先做成HTML的页面,页面内容格式如下: <a href="[scheme]://[host]/[path]?[query]" ...
- 微信打开网址添加在浏览器中打开提示 http://caibaojian.com/weixin-tip.html
原文链接:http://caibaojian.com/weixin-tip.html#t2 使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等.网上流传的各种微信打开下载链接,微信已更新基 ...
- 浏览器中打开IOS应用并传参
原创文章,转载请注明 开发中遇到这么一个问题,就是动态地指定联接服务器地址,或其它数据.如果是其它数据还好说一些,可以通过在服务器上获得的方式来弄.但如果服务器地址都需要动态指定的话.那就得另想办法了 ...
- web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开
https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开 <style typ ...
- js判断是否是在微信浏览器中打开
// js判断是否是在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/Mi ...
随机推荐
- centos7 安装php7,报错cannot get uid for user nginx
- IT题库5-并发和并行
并发和并行从宏观上来讲都是同时处理多路请求的概念.但并发和并行又有区别,并行是指两个或者多个事件在同一时刻发生:而并发是指两个或多个事件在同一时间间隔内发生.
- hibernate 调用存储过程返回参数
Connection conn= getSession().connection(); CallableStatement cs=null; //指定调用的存储过程 cs = conn.prepare ...
- cnetos7设置中文显示及中文输入法
Centos7安装的时候即使选择了中文安装,因为安装后并没有GUI,即使后来安装GUI后默认依旧是英文显示. 输入locale后显示的是 永久修改成中文:编辑/etc/profile.d/lang.s ...
- vue 3.0的搭建
1. 删除以前的vue 2.x版本,并下载3.x版本 npm uninstall -g vue-cli / yarn global remove vue-cli npm install -g @vue ...
- ElasticSearch(十一)Elasticsearch清空指定Index/Type数据
POST /index_name/type_name/_delete_by_query?conflicts=proceed { "query": { "match_all ...
- Exp2 后门原理与实践 20164303 景圣
Exp2 后门原理与实践 一.基础问题回答: 1.例举你能想到的一个后门进入到你系统中的可能方式? 答:在网上点击不安全的网页或链接. 2.例举你知道的后门如何启动起来(win及linux)的方式? ...
- elasticsearch 常用命令
#查看集群状态 curl -XGET "http://localhost:9200/_cluster/health?pretty" #查看所有的快照 curl -XGET &quo ...
- ionic3开发环境的搭建 记录！
总的来说都很顺利,毕竟已经打包成功在手机上面跑起来了,给的两个教程很给力,基本没有误差,照着步骤敲没问题,打包命令有所更新目前已修正,吃一堑长一智下面说下其中遇到的问题:1.第一点是ionic ser ...
- win10 开机自启指定软件
开机自启 %programdata%\Microsoft\Windows\Start Menu\Programs\StartUp