當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

浏览器在线预览pdf、txt、office文件

發(fā)布時(shí)間：2025/3/14 HTML 17 豆豆

生活随笔收集整理的這篇文章主要介紹了浏览器在线预览pdf、txt、office文件小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

//使用文件預(yù)覽的原因是：TMD微信瀏覽器屏蔽掉文件下載鏈接，只好折中使用文件在線預(yù)覽功能
//要點(diǎn)：1.office文件用微軟的插件打開(kāi) http://view.officeapps.live.com/op/view.aspx?src=“office文件地址（如http://oss.aliyun.com/xxx.word 、\xxx.xlsx）”
// 2.txt、pdf文件用 pdf.js 插件實(shí)現(xiàn)在線預(yù)覽嵌套在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>項(xiàng)目詳情</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">項(xiàng)目介紹</div>{*<div class="otherItem">規(guī)模：人民幣2757529.19元</div>*}<div class="otherItem">{$info.synopsis}</div><div class="hr"></div><div class="title">招標(biāo)要求</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-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}">我要投標(biāo)</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'){alertwindow.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, //點(diǎn)擊遮罩關(guān)閉 content: "<iframe src='"+dataurl+"' frameborder='0' id='"+$(this).attr('data-id')+"' name='pdfContainer'></iframe>"});}else if(attr[attr.length-1] != 'txt'){var photo = [];//創(chuàng)建對(duì)象var photosJSON = {title: "圖片信息",id: "0",start: 0,data: [{'src':dataurl,'pid':0,'alt':name[name.length-1],'thumb':''}]}// console.log(photosJSON);// //相冊(cè)層// // $.getJSON('test/photos.json?v='+new Date, function(json){ layer.photos({photos: photosJSON //格式見(jiàn)API文檔手冊(cè)頁(yè) ,anim: 5 //0-6的選擇，指定彈出圖片動(dòng)畫(huà)類(lèi)型，默認(rèn)隨機(jī) });// }); }});});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>

轉(zhuǎn)載于:https://www.cnblogs.com/indifferent/p/10975041.html

總結(jié)

以上是生活随笔為你收集整理的浏览器在线预览pdf、txt、office文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。