我是在IE11和谷歌上做的測試,都可以顯示,把做出的東西記錄下來,方便大家還有自己學習!
可以在IIS7服務器上也可以下載Tomcat來做服務器
Tomcat下載地址 http://pan.baidu.com/s/1dEEUFQD
根據百度經驗安裝和配置Tomcat http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.html
有關pdf.js的介紹在如下網址 https://github.com/mozilla/pdf.js
這里只需下載此文件即可 http://pan.baidu.com/s/1c2yXWwo
把generic拷貝到Tomcat的webapps中
啟動Tomcat后,就可以通過在瀏覽器地址欄輸入下列網址即可打開自帶的demo:
http://localhost:8080/generic/web/viewer.html
調用pdf.js插件,將該插件放到頁面的框架中,代碼如下所示
html代碼
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>pdf</title>
6 <link rel="stylesheet" type="text/css" href="main.css"/>
7 </head>
8 <body style="background:url(img/%E8%83%8C%E6%99%AF3.jpg)">
9 <center>
10 <div id="head">
11 </div>
12 <div id="main">
13 <div id="main_l">
14 <iframe name="myframe" src="http://localhost:8080/generic/web/viewer.html" width="886" height="990"></iframe>
15 </div>
16 <div id="main_r">
17 <h3><a href="http://localhost:8080/generic/web/viewer.html?file=pdf/1.pdf"target="myframe">pdf1</a></h3>
18 <h3><a href="http://localhost:8080/generic/web/viewer.html?file=pdf/2.pdf"target="myframe">pdf2</a></h3>
19 <h3><a href="http://localhost:8080/generic/web/viewer.html?file=pdf/3.pdf" target="myframe">pdf3</a></h3>
20 </div>
21 </div>
22 <div id="foot">
23 </div>
24 </body>
25 </html>
css代碼
1 @charset "utf-8"; 2 /* CSS Document */
3 #body{ background:url(img/%E8%83%8C%E6%99%AF3.jpg)}
4 #main{width:1500px; height:1090px; background:url(img/%E8%83%8C%E6%99%AF3.jpg); padding-top:0px;}
5 #main_r{width:600px; height:1090px; background:url(img/%E8%83%8C%E6%99%AF3.jpg); float:left}
6 #main_l{width:896px; height:996px; ; float:left; padding-top:2px; padding-left:2px; padding-bottom:2px; padding-right:2px; background:#000}
7 #head{ width:1500px; height:80px; background:url(img/%E8%83%8C%E6%99%AF3.jpg);}
8 #foot{ width:1500px; height:80px; background:url(img/%E8%83%8C%E6%99%AF3.jpg);}
調試效果如下圖:
隱藏下載功能:
在viewer.html更改即可
更改之前
更改之后
即增加 style="visibility:hidden";就可隱藏下載功能。
(想要打開的本地文件必須放到tomcat的webapp路徑中,而且如果文件名有漢字也會打不開文件,這個問題還有待解決!!)