利用PDF.JS插件解决了本地pdf文件在线浏览问题

 时间:2024-10-21 23:47:39

1、我是在IE11和谷歌上做的测试,都可以显示,把做出的东西记录下来,方便大家还有自己学习!

2、可以在IIS7服务器上也可以下载Tomcat来做服务器调用pdf.js插件,将该插件放到页面的框架中,代码如下所示

3、html代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>pdf</title><link rel="stylesheet" type="text/css" href="main.css"/></head><body style="background:url(img/%E8%83%8C%E6%99%AF3.jpg)"><center><div id="head"></div><div id="main"> <div id="main_l"> <iframe name="myframe" src="http://localhost:8080/generic/web/viewer.html" width="886" height="990"></iframe> </div> <div id="main_r"> <h3><a href="http://localhost:8080/generic/web/viewer.html?file=pdf/1.pdf"target="myframe">pdf1</a></h3> <h3><a href="http://localhost:8080/generic/web/viewer.html?file=pdf/2.pdf"target="myframe">pdf2</a></h3> <h3><a href="http://localhost:8080/generic/web/viewer.html?file=pdf/3.pdf" target="myframe">pdf3</a></h3> </div></div><div id="foot"></div></body></html>

4、css代码@charset "utf-8";/* CSS Document */#body{ background:url(img/%E8%83%8C%E6%99%AF3.jpg)}#main{width:1500px; height:1090px; background:url(img/%E8%83%8C%E6%99%AF3.jpg); padding-top:0px;}#main_r{width:600px; height:1090px; background:url(img/%E8%83%8C%E6%99%AF3.jpg); float:left}#main_l{width:896px; height:996px; ; float:left; padding-top:2px; padding-left:2px; padding-bottom:2px; padding-right:2px; background:#000}#head{ width:1500px; height:80px; background:url(img/%E8%83%8C%E6%99%AF3.jpg);}#foot{ width:1500px; height:80px; background:url(img/%E8%83%8C%E6%99%AF3.jpg);}

5、调试效果如下图:

利用PDF.JS插件解决了本地pdf文件在线浏览问题

6、隐藏下载功能:在viewer.html更改即可更改之前与之后对比图 即增加 style="visibility:hidden";就可隐藏下载功能。

利用PDF.JS插件解决了本地pdf文件在线浏览问题
利用PDF.JS插件解决了本地pdf文件在线浏览问题
  • 邮件推广方法有哪些
  • 怎么预防猩红热
  • 如何购买银杏树
  • 空心菜有麻点如何治
  • 专科铁路学校有哪些?专科铁路学校分数线多少?
  • 热门搜索
    敬廉崇洁手抄报资料 消防安全教育手抄报 最漂亮的手抄报花边 消防知识手抄报图片 好词好句手抄报 爱我中华手抄报资料 关于传染病的手抄报 文明从我做起手抄报 春手抄报 科技创新手抄报资料