一、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

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