這篇實現的是在線展示pdf和word並且不能顯示下載和打印按鈕
一 下載功能：
因為html5給a標簽新添加了一個屬性download，這個屬性可以直接實現下載文件的功能：<a href="xxx.pdf" download="名字"></a> 這樣就實現點擊a標簽下載文件了（這里面的是用的html5的屬性，所以是不兼容ie8的）
二 在線瀏覽功能：
第一種是用emded展示（這種是默認的有下載和打印功能，並且不能去掉）
第二種 pdf利用的是pdf.js word利用的是xdoc （比較推薦第二種）
（1）pdf文件
github上面有https://github.com/mozilla/pdf.js可以看一下文檔
我的代碼的github地址：https://github.com/GainLoss/Online-browsing
過程：找到my-pdf.js中的
這個文件夾，然后將這個文件夾放到你的代碼中，在layui中初始化的時候的content上加上viewer.js的地址?file=pdf的地址就可以獲取到你需要獲取的pdf了
注意：
1.在viewer.js中
有個變量，將這個變量的賦值去掉
2.如果出現了
這種的話就是出現了跨域問題了
3.（這種需要上傳的文件比較多，正式部署的時候，代碼就一個pdf上傳的代碼太多了，這塊需要改進）
（2）word文件
content:'http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=你文件的地址',這里面是將文檔給了第三方 然后通過第三方轉給你一個可以用的。
如果出現問題，大部分都是你的文件地址或者是跨域的原因
資源：http://www.xdocin.com/
三 .彈框的在線展示文件
我們利用的是layer，這個是針對彈出框的一個web彈層組件。有興趣的可以直接看看官網：http://layer.layui.com/
我們實現將文件放置到layer彈出框的過程，只是將文件的路徑獲取到，然后將layer的選項配置一下就可以了代碼是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>開始使用Layui</title>
</head>
<body>
<button style="width:100px;height:50px;" class="btn">彈出</button>
<script src="./jquery.js"></script>
<script src="./layui/layui.js"></script>
<script>
$(".btn").click(function(){
layui.use(['layer', 'form'], function(){
var layer = layui.layer,form = layui.form();
layer.open({
type : 2,
title : '<span class="layer-title-move-text">文件預覽(此處可以拖動)</span> - <a href="./1.pdf" download="1.pdf">立即下載</a>',
shadeClose : true,
move : '.layer-title-move-text',
shade : false,
resize : true,
maxmin : true, // 開啟最大化最小化按鈕
area : ['800px', '500px'],
content : './1.pdf'
});
});
})
</script>
</body>
</html>
參考資料：http://www.cnblogs.com/kagome2014/p/kagome2014001.html
我的github:https://github.com/GainLoss/Online-browsing