一、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 pdf = PDFObject.embed(
           "assets/docs/xx免责声明及数据安全保密协议.pdf",
           "#pdf"
        );
      };
</script>

三、通过pdf.js插件

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

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐