ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

如何在html中在线预览pdf文件

2021-07-27 11:31:54  阅读:498  来源: 互联网

标签:jquery 插件 预览 media js html pdf 下载


一、jquery,media.js (最为推荐)

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

下载地址:jquery,js&&jquery.media.js

提取码:jkfy

<script type="text/javascript" src="./jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="./jquery.media.js"></script>

2.页面加载完成需要执行的js代码:

$(function() {
    $('a.media').media({width:'100%', height:'900px'});
});

 3.在需要预览的区域加上html代码:

<div>
    <a class="media" href="你的文件链接路径.pdf"></a>
</div>

二、通过pdfobject.js插件

1.引入pdfobject.js插件

<script type="text/javascript" src="js/pdfobject.js"></script>

下载地址:https://pan.baidu.com/s/1PsLv9icTB5CZiMM825Hcdg
提取码:jkfy

2.写js代码

<script type="text/javascript">
      window.onload = function (){
        var myPDF = new PDFObject({ url: "路径.pdf" }).embed("可写id选择器");
      };
</script>

三、通过pdf.js插件

下载地址:https://github.com/mozilla/pdf.js

文件很多,很麻烦 ,不推荐,有兴趣可以查看相关文章

标签:jquery,插件,预览,media,js,html,pdf,下载
来源: https://blog.csdn.net/weixin_39161276/article/details/119134656

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有