pdf.js如何默認顯示指定頁碼

前兩天由於工作需要,用到了pdf.js,裏面有功能是需要顯示出來pdf的指定頁數,百度了很長時間,

發現百度上關於此類的問題的回答很少,可能都不會用到這個需求吧...

於是只能硬生生的去看看pdf.js裏面的viewer.js源碼,希望從中找到解決辦法,但是接近8000行的代碼,看的眼睛都花了...

於是想了一個捷徑的方法,不是特別完美的解決了這個問題...

接下來,正式介紹:

1.首先說一下定義文件路徑問題。

   我的pdf.js是作爲子窗口嵌套進來的的,即使用了<iframe>標籤。

   所以,我在從後臺查詢出路徑和頁碼後定義路徑(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;

3.已經得到存放頁碼的數組(只有一頁時,也可以用該方法)後,找到下圖這個函數


 

上圖中的第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這個屬性。


發佈了45 篇原創文章 · 獲贊 41 · 訪問量 28萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章