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

2025-09-28 14:04:03

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

      </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文件在线浏览问题

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢