前两天由于工作需要,用到了pdf.js,里面有功能是需要显示出来pdf的指定页数,百度了很长时间,
发现百度上关于此类的问题的回答很少,可能都不会用到这个需求吧...
于是只能硬生生的去看看pdf.js里面的viewer.js源码,希望从中找到解决办法,但是接近8000行的代码,看的眼睛都花了...
于是想了一个捷径的方法,不是特别完美的解决了这个问题...
接下来,正式介绍:
1.首先说一下定义文件路径问题。
我的pdf.js是作为子窗口嵌套进来的的,即使用了
所以,我在从后台查询出路径和页码后定义路径(pdfURL)和页码(pageArr)的时候都是定义的JS全局变量。
viewer.js文件中获取到父窗口的url(在文件最上面定义为全局的):
var DEFAULT_URL=window.parent.pdfURL;
这样就可以显示出PDF文件了
注意:如果移动了viewer.html和viewer.js文件位置的话,要更改js文件中的默认路径,找到下图的这个函数,并修改其相应的路径:
2.现在文件可以显示了,就要解决如何显示到指定页面了。
因为我的数据库中存放的页码形如“2,3,4”这样的形式,所以在获取到页数后,使用split函数,进行分隔
这里的pageArr变量是全局变量。
viewer.js文件中获取到父窗口的页数pageArr(在文件最上面定义为全局的):
var fpage=window.parent.pageArr;
上图中的第1893行是我自己加入的,这个函数就是初始化页面的函数,
这句话就是为当前页面指定页码,所以我指定的默认显示页的是我所需的页码数组中的第一位。
这样在初始化的时候,就会默认跳转到我们指定的页面了。
如果不需要将其他页面隐藏的话,就不必看第4步了。
4.显示指定的页码,先找到下面这个函数。
这个函数的最下面是这样的:
这里是将每页的PDF的内容添加到页面中,并且的viewer.js有循环调用。
所以在这里做点文章就可以了。
如下图:
上图中4770行中的if语句是我自己加的,
意思就是判断这个this.id在不在这个页码(fpage)中,如果不在的话,就会返回-1;
这个时候给它加一个属性,visibility="hidden";
else语句里面的同理。
这里不能用for循环为这个id加样式,为什么呢,试试就知道了,这里是双重循环的...
5.最后这样的话,页面就会只显示我们所指定的页码了,但是不足的一点就是,
visibility这个属性是占空间的,即使其他的不会显示,但也会有一片黑色的区域....
尝试过用,display="none"; 这样显示的效果就完美了
但是这样的话,下面这个函数就会报错,由于我的JS能力和时间有限,就没有仔细研究。
有大神会的话,也可以指点下我。
这个函数好像主要就是定页面的那个偏移量的,定位到那一页,偏移量就是多少,
要是display=none的话,这样元素的高度就不存在,定位偏移量就会报错。
所以最后使用了visibility这个属性。