1、前端實現pdf文件在線預覽功能
ps:剛好工作上有這個需求,所以到處找了一下處理方案,大家有需要可以試一下這幾種方案,找到合適自己的
方式一、
pdf文件理論上可以在瀏覽器直接打開預覽但是需要打開新頁面。在僅僅是預覽pdf文件且UI要求不高的情況下可以直接通過a標簽href屬性實現預覽
<a href="文檔地址"></a>
ps:這個會直接變成下載,注意使用
方式二、
通過jquery插件jquery.media.js實現
這個插件可以實現pdf預覽功能(包括其他各種媒體文件)但是對word等類型的文件無能為力。
實現方式:
js代碼:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.media.js"></script>
下載地址:
jquery.media官方網址:http://malsup.com/jquery/media/
jquery.media GitHub地址:https://github.com/malsup/media/tree/master
jquery.media.rar(解壓密碼:crowsong.xyz): http://waternote.ctfile.net/fs/2276132-372976040
html結構:
<body> <div id="handout_wrap_inner"></div> </body>
調用方式:
$('#handout_wrap_inner').media({ width: '100%', height: '100%', autoplay: true, src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'}); </script>
方式三、
引入
<script src="http://jhyt.oss-cn-shanghai.aliyuncs.com/images/1531367199089_PDFObject.js"></script>
html結構
<div id="example1"></div>
通過js動態添加需要瀏覽的pdf地址
var options = { height: "550px", pdfOpenParams: {view: 'FitV', page: '0' }, name:"mans", fallbackLink: "<p>您的瀏覽器暫不支持此pdf,請下載最新的瀏覽器</p>" }; PDFObject.embed(url文檔地址, "#example1",options);
ps:理論上用來預覽pdf文件,不具備處理word,xls,ppt等文件
2、word、xls、ppt文件在線預覽功能
2-1、
word、ppt、xls文件實現在線預覽的方式比較簡單可以直接通過調用微軟的在線預覽功能實現 (預覽前提:資源必須是公共可訪問的)
<iframe src='https://view.officeapps.live.com/op/view.aspxsrc=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'> </iframe>
使用方式:https://view.officeapps.live.com/op/view.aspx?src=文檔地址
ps:適用pc端預覽,這種方式在移動端不會自動適配,移動端會顯示的很怪異。
2-2、
<iframe :src="'//ow365.cn/?i=18679&ssl=1&furl='+fileUrl" width="100%" height="100%" frameborder="0"> </iframe>
使用方式://ow365.cn/?i=18679&ssl=1&furl=文檔地址
ps:適用PC,移動端使用,但是有水印,但是不影響使用
2-3、
<iframe :src="'//www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc='+fileUrl" width="100%" height="100%" frameborder="0"> </iframe>
使用方式://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=文檔地址
ps:適用PC,移動端使用,不能處理比較老的word文件,比如.doc后綴的文件,但是顯示很清晰,可惜會有個很大的微信二維碼,暫時沒想到辦法怎么去掉,能去掉的的話,麻煩也告訴我一下,謝謝