针对pdfjs做二次开发的xshen-pdf仍在继续开发着,不过离第一个可用的版本发布还有一段时间。我正在按部就班的一步步向前推进中。
我想要实现一个比较灵活的阅读器,可以竖着查看、可以竖着查看、可以翻页查看、可以平铺查看,可以支持PC端、移动端等等。整体来说,实现这个目标并不算是非常困难。
不管是竖着查看还是横着查看,亦或是翻页查看,无非就是将PDF的页面以不同的形式组织起来而已。因此,能够良好的管理起每一个PDF页面,是非常关键的。在pdfjs里,PDFPageView就是来管理单独的PDF页面的。然后由PDFViewer来管理若干个PDFPageView,最终实现一个滚动式的阅读查看器。我的思路和pdfjs的基本是一致的。在由PDFPageView管理好每一个页面的基础上,实现一系列的Viewer,也就是一个个PDF阅读器,例如ScrollViewer、FlipViewer、MobileViewer等。
截至目前,我将PDFPageView和PDFViewer做了一些修改,通过管理一个个单独的PDFPageView,实现了PDF页面的平铺功能。也就是将PDF页面中的按照从左到右,从上到下的方式,一个个摆放出来。并且已经将PDF的页面大小的配置,通过参数来进行控制了,只要在初始化PDF的过程中,像下面一样,声明好单个PDF页面的宽高,就可以按照一定的比例,将PDF页面渲染出来:
Seren.init('container', {
firstPage: 1,
width: 460,
height: 'auto'
});
在这里,我将宽度限制为460,并且将高度设置为随宽度进行调整。然后通过平铺的方式,就实现了一个个PDF页面的平铺展示。具体效果如下:
开源代码的地址如下:
https://gitee.com/xingshen24/xshen-pdf