推荐阅读
翻页
原理：翻页的原理很简单，还记得上节的一个函数吗？
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}
<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}
<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预览大文件。
