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

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

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

使用 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、网站被黑、网站漏洞修复等。
专业解决各种疑难杂症，您有任何网站问题都可联系我们技术人员微信。
➥ 可淘宝担保交易，安全无风险

上一篇：javascript将html网页部分内容转换为图片

下一篇：pbootcms文章内容轮播多图的图片注解改为多行

广告
广告

相关文章

栏目分类

本栏推荐

pbootcms全国多城市网点筛选查询插件 适用于经销商查询，分店查询，售后服务站查询
技术微信