推薦閱讀
翻頁
原理：翻頁的原理很簡單丧失，還記得上節(jié)的一個函數(shù)嗎豺妓？
pdf.getPage(firstPageNumber);
firstPageNumber 就是需要渲染的頁面，我們只要改變頁碼值布讹，就能夠顯示不同的頁面琳拭，實現(xiàn)翻頁效果
開始編碼
- 記錄必要的變量
# numPages: 文件總頁數(shù)
# currentPage: 當前頁碼
// 保存PDF頁碼
const [numPages, setNumPages] = useState(0);
// 當前頁
const [currentPage, setCurrentPage] = useState(1);
- 定義翻頁div
<div className='pagination'>
<button className="toolbarButton pageUp" title="Previous Page" id="previous" >
Previous Page
</button>
<input type="number" id="pageNumber" className="toolbarField pageNumber" value={currentPage} />
/ {numPages}
<button className="toolbarButton pageDown" title="Next Page" id="next" >
Next Page
</button>
</div>
- 編寫邏輯
翻頁的邏輯有兩個極端，第一頁的時候不允許向前翻頁描验，最后一頁的時候白嘁，不允許向后翻頁，所以我們在標簽加入相關(guān)的判斷邏輯膘流。
頁碼改變都要重新渲染PDF頁面
<div className='pagination'>
<button
className="toolbarButton pageUp"
title="Previous Page"
id="previous"
onClick={() => {
const previousPage = currentPage - 1;
setCurrentPage(previousPage);
renderPdf(pdfInstance, previousPage);
}}
disabled={currentPage === 1}
>
Previous Page
</button>
<input
type="number"
id="pageNumber"
className="toolbarField pageNumber"
value={currentPage}
onChange={e => {
const val = parseInt(e.target.value)
if (val >= 1 && val <= numPages) {
setCurrentPage(val)
renderPdf(pdfInstance, val)
}
}}
/>
/ {numPages}
<button
className="toolbarButton pageDown"
title="Next Page"
id="next"
onClick={() => {
const nextPage = currentPage + 1;
setCurrentPage(nextPage);
renderPdf(pdfInstance, nextPage);
}}
disabled={currentPage === numPages}
>
Next Page
</button>
</div>
縮放
原理：與縮放原理相關(guān)的函數(shù)我們在上一節(jié)也遇到過絮缅，
const viewport = page.getViewport({ scale: scale * devicePixelRatio });
scale 默認值是 1 通過改變scale 值實現(xiàn)放大縮小
開始編碼
- 記錄必要的變量
# scale 當前縮放比例
// 設置大小
const [scale, setScale] = useState(1)
- 定義縮放div
<div className='zoom'>
<button>
Zoom In
</button>
<input disabled value={percentZoom} />
<button >
Zoom Out
</button>
</div>
- 編寫邏輯
放大縮小每次都放大縮小10%，可以自己定義每次放大縮小的比例呼股，定義最大和最小的界限耕魄，每次修改也要重新的渲染一次pdf 頁面
<div className='zoom'>
<button
onClick={() => {
const curScale = scale + 0.1;
if (scale <= 2) {
setScale(curScale)
renderPdf(pdfInstance, currentPage)
}
}}
>
Zoom In
</button>
<input
disabled
value={percentZoom}
/>
<button
onClick={() => {
const curScale = scale - 0.1;
if (scale > 0.5) {
setScale(curScale)
renderPdf(pdfInstance, currentPage)
}
}}
>
Zoom Out
</button>
</div>
通過以上四節(jié)我們基本完成了前端頁面渲染PDF的基本功能，但是我們要做的不僅僅只有這些彭谁，我們實現(xiàn)的只是單頁面視圖吸奴。用戶體驗不是很好，我們要實現(xiàn)多頁面試圖，用戶滾動查看则奥，但是用戶滾動查看就會遇到性能問題考润，因為每一頁都要渲染成一個 canvas 標簽，如果PDF有幾千頁读处，就要幾千個dom節(jié)點糊治，這樣性能是級差的，頁面卡的根本動不了罚舱。這時候我們就要優(yōu)化井辜！采用虛擬dom優(yōu)化長列表。用到的包：react-virtualized
下節(jié)我們就使用 react + react-virtualized + pdf.js 實現(xiàn)PDF預覽大文件馆匿。
本節(jié)完整代碼：https://github.com/LiuSandy/react-pdf-render
