效果图：

使用pdf5.js插件完成效果。

html部分：

<div class="pdfjs"></div>
<div class="pdfjs2"></div>

js 部分

var url = 'test1.pdf';
var pdfh5 = new Pdfh5('.pdfjs' , {
    pdfurl:url
})
pdfh5.on("renderPages",function(currentPageDom){
    //监听当前加载的pdf页数,currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数,
    // console.log(this.currentNum)
    // console.log(pdfh5.currentNum)
 })

还要引入pdf5.css

<link rel="stylesheet" href="css/pdfh5.css"/>

pdf5其他用法：

pdf5监听发

//新增on方法,监听各种事件
 pdfh5.on("start",function(str){
     console.log(str)
 })
 pdfh5.on("complete",function(str){
     pdfh5.scrollEnable(true)
 })

pdfh5.scrollEnable(true)允许pdf滚动,

pdfh5.scrollEnable(false)不允许pdf滚动

//pdfh5还有pdfh5开始初始化、pdfh5加载完成、PDF加载失败、PDF加载成功事件：   pdfh5.start pdfh5.complete pdfh5.error pdfh5.success

//pdfh5还有还原事件、销毁事件（附带回调函数）：   pdfh5.reset pdfh5.destroy

//pdfh5还有静态参数：

//pdf最外层div pdfh5.container

//pdf第二层div pdfh5.viewerContainer

//所有包裹pdf的div的父div pdfh5.viewer

//所有包裹pdf的div pdfh5.pages

//pdf加载完成状态 pdfh5.pdfLoaded

//pdf总页数 pdfh5.totalNum

//pdf当前页数 pdfh5.currentNum

//pdfh5初始化的时间戳 pdfh5.initTime

pdf5介绍：

pdf5是移动端pdf插件 预览pdf 展示pdf 在线打开pdf-pdfh5.js

只适用于移动端。

插件式基于pdf.js和jquery的。可以手势缩放。

new Pdfh5(selector,options) 

options可以不填：new Pdfh5(selector）,不设置pdf路径，会默认拿地址栏的?file=后面的pdf路径