广告
广告
广告
其他网站相关知识您现在的位置是:主页 > 其他网站相关知识 >

如何在html页面中增加在线预览pdf文件功能?

2024-01-20 11:01:09其他网站相关知识 161人已围观

使用 jquery js 库

1.引入 jquery-3.1.1.min.js 和 jquery.media.js 两个js文件,下载保存到本地

点击下载js文件

2.在html页引入js脚本

<script type="text/javascript" src="javascripts/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="javascripts/jquery/jquery.media.js"></script>
3.页面加载完成需要执行的js代码:
$(function() {
    $('a.media').media({width:'1200px', height:'900px'});
});
4.在需要预览的区域加上html代码:
<div>
    <a class="media" href="doc/乔布斯传中文版.pdf"></a>
</div>
完整demo代码如下:
<!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=utf-8" />
<meta name="keywords" content="乔布斯传中文版:在线阅读" />
<meta name="description" content="乔布斯传中文版:在线阅读" />
<title>乔布斯传中文版</title>
<script type="text/javascript" src="javascripts/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="javascripts/jquery/jquery.media.js"></script>
<script type="text/javascript">
    $(function() {
        $('a.media').media({width:'1200px', height:'900px'});
    });
</script>
</head>
<body background="images/bj.jpg">
 
<center>
<div>
    <a class="media" href="doc/乔布斯传中文版.pdf"></a>
</div>
</center>
</body>
</html>     

 


扫码添加技术微信【解决问题,仅需10元起】

专注中小企业网站建设、网站安全15年。
熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascript等。
承接:企业仿站、网站修改、网站改版、BUG修复、问题处理、二次开发、PSD转HTML、网站被黑、网站漏洞修复等。
专业解决各种疑难杂症,您有任何网站问题都可联系我们技术人员微信。
➥ 可淘宝担保交易,安全无风险

广告
广告
技术微信