推荐阅读

• 1、前端页面如何优雅的显示PDF：原理说明
• 2、前端页面如何优雅的显示PDF（上）：渲染页面
• 3、前端页面如何优雅的显示PDF（中）：渲染文本
  

翻页

原理：翻页的原理很简单，还记得上节的一个函数吗？

pdf.getPage(firstPageNumber);

firstPageNumber 就是需要渲染的页面，我们只要改变页码值，就能够显示不同的页面，实现翻页效果

开始编码

• 记录必要的变量

# 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页面

<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>

缩放

原理：与缩放原理相关的函数我们在上一节也遇到过，

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 页面

<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-virtualized

下节我们就使用 react + react-virtualized + pdf.js 实现PDF预览大文件。

本节完整代码：https://github.com/LiuSandy/react-pdf-render