四、前端頁面如何優雅的顯示PDF（下）：添加工具欄

時間 2020-04-13

標籤前端頁面如何優雅顯示 pdf 添加工具欄简体版

原文原文鏈接

翻頁

原理：翻頁的原理很簡單，還記得上節的一個函數嗎？前端

pdf.getPage(firstPageNumber);
複製代碼

firstPageNumber 就是須要渲染的頁面，咱們只要改變頁碼值，就可以顯示不一樣的頁面，實現翻頁效果react

開始編碼

記錄必要的變量

# numPages: 文件總頁數
# 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}
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button className="toolbarButton pageDown" title="Next Page" id="next" >
        Next Page
    </button>
</div>
複製代碼

編寫邏輯

翻頁的邏輯有兩個極端，第一頁的時候不容許向前翻頁，最後一頁的時候，不容許向後翻頁，因此咱們在標籤加入相關的判斷邏輯。頁碼改變都要從新渲染PDF頁面git

<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}
    &nbsp;&nbsp;&nbsp;&nbsp;
    <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>
複製代碼

縮放

原理：與縮放原理相關的函數咱們在上一節也遇到過，github

const viewport = page.getViewport({ scale: scale * devicePixelRatio });
複製代碼

scale 默認值是 1 經過改變scale 值實現放大縮小面試

開始編碼

記錄必要的變量

# 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 頁面canvas

<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>
複製代碼

經過以上四節咱們基本完成了前端頁面渲染PDF的基本功能，可是咱們要作的不單單隻有這些，咱們實現的只是單頁面視圖。用戶體驗不是很好，咱們要實現多頁面試圖，用戶滾動查看，可是用戶滾動查看就會遇到性能問題，由於每一頁都要渲染成一個 canvas 標籤，若是PDF有幾千頁，就要幾千個dom節點，這樣性能是級差的，頁面卡的根本動不了。這時候咱們就要優化！採用虛擬dom優化長列表。用到的包：react-virtualizedbash