jquery pdf显示插件 h5 pdf插件

pdfh5插件使用

项目中用到了PDF预览功能，初始使用的是 react-read-pdf 插件。但是有一个问题，就是无法显示扫描的营业执照、盖章等等问题。
因此更换之后使用上面插件，此插件预览是通过切成图片然后来显示，其实显示的不是源文件，而是切割后的图片。

安装
npm install pdfh5 --save

使用
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";

new Pdfh5( selector, options )
selector: 'pdfh5的容器选择器', // 选择器
options: {} // 配置项

初始化
const pdfh5 = new Pdfh5('#test', () => {
      pdfurl: 'pdf文件路径', // 其他参数配置可参考文档
})

至此，已经可以在页面中正常显示文档。

PDF 文件有大有小，一旦文件过大，则翻页、跳页，可能会成为某些客户的需求。虽然，滑动已经很流畅，也很好用。
多页的时候，在左上角会有当前页码和总页码的显示。
pdfh5 的 on 事件可以监听所有事件（具体事件可参看文档）。比如：

pdfh5.on('ready', () => {
      console.log('可以在这里拿到所有页码', pdfh5.totalNum)
})

pdfh5.on('success', () => {
      console.log('成功之后的操作，比如隐藏自定义的loading。可以在初始化的时候设置loading，加载成功隐藏掉')
})

pdfh5.on('complete', (status, message, time) => {
      console.log('无论成功失败都会执行这里，可根据status状态的不同，来进行不同的操作')
})

更多方法，可去查看文档

该插件只是将 PDF 以图片的形式显示出来，但是并没有提供翻页组件的显示。好在提供了一个翻页方法 goto 。
但是，这个 goto 方法不好使，需要修改一下滚动方法。

首先找到如下文件：pdfh5.js

找到 goto 方法

goto: function(num) { }

element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
作者以此来作为滚动到的距离，是错误的。应该是这个距离加上页面卷积的距离。这才是正确的距离。

或者用另外一种方法：

获取单个元素的高度，则跳到第几页就是滚动 n-1 个元素的高度。
当然，获取单个元素高度就不需要循环了，所以：

至此，就可以使用 goto 方法跳转了。

但是，还有一点儿小问题，你会发现滚动页码偏移，那是因为每一页有个 margin-bottom = 8px, 去掉即可，或者滚动距离加上 (n-1)*8

最终改完的goto方法：

goto: function(num) {
      var self = this;
      if (!isNaN(num)) {
            if (self.viewerContainer) {
                  self.pages = self.viewerContainer.find('.pageContainer');
                  console.log('self.pages=', self.pages)
                  if (self.pages) {
                        var h = 0;
                        var signHeight = 0;
                        if (num - 1 > 0) {
                              signHeight = self.pages[0].getBoundingClientRect().height;
                        }
			self.viewerContainer.animate({
				scrollTop: signHeight * (num-1)
			}, 300)
                  }
	    }
      }
      
}

至此基本🆗