//使用文件预览的原因是：TMD微信浏览器屏蔽掉文件下载链接，只好折中使用文件在线预览功能
//要点：1.office文件用微软的插件打开 http://view.officeapps.live.com/op/view.aspx?src=“office文件地址（如http://oss.aliyun.com/xxx.word 、\xxx.xlsx）”
// 2.txt、pdf文件用 pdf.js 插件实现在线预览 嵌套在layer显示（本人的前端烂的一匹）
// 3.图片文件 也用layer显示
// pdf.js下载地址https://files.cnblogs.com/files/indifferent/pdf.js ； pdf.worker.js下载地址：https://files.cnblogs.com/files/indifferent/pdf.worker.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>项目详情</title>
<link rel="icon" type="image/x-icon" href="https://erun.oss-cn-shenzhen.aliyuncs.com/images/system/config/website/favicon_0.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
{link href="@web/css/bid/public.css"}
<style>
.downloadFile{
margin-top: 20px;
padding-left: 5px;
}
.downloadFile ul{
padding: 0;
margin:0;
margin-top: 10px;
list-style: none;
}
.downloadFile li{
color:blue;
text-decoration: underline;
margin-bottom: 5px
}
.pdfobject-container {
height: 30rem; border: 1rem solid rgba(0,0,0,.1);
}
.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: 100%;*/
width: 100%;
height: 100%;
/*margin-left: -446.5px;*/
z-index: 9;
}
</style>
</head>
<body>
<div class="zbDetail">
<p>{$info.obj_name}</p>
<div class="company">{$info.company}</div>
<div class="other">
<span>{strstr($info.address,',',-1)}</span>
<div class="time">
<img src="../../images/bid/clock.png">
<div> 截止 {date('Y-m-d',$info.endtime)}</div>
</div>
</div>
<div class="hr"></div>
<div class="title">
项目介绍
</div>
{*<div class="otherItem">规模：人民币2757529.19元</div>*}
<div class="otherItem">{$info.synopsis}</div>
<div class="hr"></div>
<div class="title">
招标要求
</div>
<div class="otherItem">
{$info.demand}
</div>
{if $info.attachmentItem neq ''}
<div class="downloadFile">
<p >附件下载</p>
<ul class="uploadFileSource" >
{foreach from=$info.attachmentItem item=item key=key}
<li >
<!-- <a class="fileview" data-url="{$item[0]}" href="http://view.officeapps.live.com/op/view.aspx?src={$item[0]}" download="{$item[1]}">{$item[1]}</a> -->
<a class="fileview" data-id="file{$key}" data-url="{$item[0]}" href="javascript:void(0)" download="{$item[1]}">{$item[1]}</a>
</li>
{/foreach}
</ul>
</div>
{/if}
</div>
<a class="goSub" href="./form.html?id={$info.id}">我要投标</a>
</div>
</body>
</html>
{script src='@web/js/jquery-1.9.1.min.js'}
{script src='@web/js/pdf.js'}
{script src='@web/js/pdf.worker.js'}
<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(ele){
// showPdf(false)
ele.onclick = function(){
showPdf(false);
}
}
</script>
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<script type="text/javascript">
$().ready(function(){
function show(id){
console.log('dsd')
// var temp = $('#'+id).contents().("#plugin");
// console.log(temp.attr('name'))
$('#'+id).onclick=function(){
console.log('hlslfs')
if($('#pop').css('display')=='block'){
$('#'+id).css('display', 'none');
}
}
}
$('.fileview').click(function(){
var dataurl = $(this).attr('data-url')
var attr = dataurl.split('.');
var name = dataurl.split('/');
if(attr[attr.length-1] == 'doc'|| attr[attr.length-1] == 'docx'|| attr[attr.length-1] == 'docm'|| attr[attr.length-1] == 'dotx' || attr[attr.length-1] == 'dotm' || attr[attr.length-1] == 'xls'|| attr[attr.length-1] == 'xlsx'|| attr[attr.length-1] == 'xlsm'|| attr[attr.length-1] == 'xltx'|| attr[attr.length-1] == 'xltm'|| attr[attr.length-1] == 'xlsb'|| attr[attr.length-1] == 'xlam' || attr[attr.length-1] == 'ppt' || attr[attr.length-1] == 'pptx'|| attr[attr.length-1] == 'pptm'|| attr[attr.length-1] == 'ppsx'|| attr[attr.length-1] == 'ppsm'|| attr[attr.length-1] == 'potx'|| attr[attr.length-1] == 'potm'|| attr[attr.length-1] == 'ppam'){
alert
window.location.href = 'http://view.officeapps.live.com/op/view.aspx?src='+dataurl;
}else if(attr[attr.length-1] == 'pdf' || attr[attr.length-1] == 'PDF'|| attr[attr.length-1] == 'txt'){
layer.open({
type: 1,
maxmin: true,
area: ['100%', '100%'],
shadeClose: true, //点击遮罩关闭
content: "<iframe src='"+dataurl+"' frameborder='0' id='"+$(this).attr('data-id')+"' name='pdfContainer'></iframe>"
});
}else if(attr[attr.length-1] != 'txt'){
var photo = [];//创建对象
var photosJSON = {
title: "图片信息",
id: "0",
start: 0,
data: [{
'src':dataurl,
'pid':0,
'alt':name[name.length-1],
'thumb':''
}]
}
// console.log(photosJSON);
// //相册层
// // $.getJSON('test/photos.json?v='+new Date, function(json){
layer.photos({
photos: photosJSON //格式见API文档手册页
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
});
// });
}
});
});
var plugin = window.top.document.getElementById("plugin");
if(plugin != null){
plugin.onclick = function(){
close()
}
}
$('#pop').onclick= function(){
console.log('dsdsd')
close();
}
</script>
<script type="text/javascript">
</script>
浏览器在线预览pdf、txt、office文件的相关教程结束。
