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)
}
}
}
}
至此基本🆗