使用pdf.js開發一個圖書在線閱讀界面，可以點擊書簽顯示對應的頁面，可以全文檢索

客戶現場問題：圖書pdf文件單個超過1G的文件很多，在線加載pdf文件特別慢，半天都加載不出來，所以需要在線閱讀功能進行重構

解決辦法：

　　一、后台處理

　　　　  1、首先使用itext-pdf對pdf文件進行書簽抽取，對抽取出的書簽保存到書簽表，書簽表里會有書簽名稱、頁碼、層級關系等字段，然后對書簽使用ES創建索引

　　　　  2、對pdf文件進行按頁拆分，拆分成多個pdf文件，拆分使用cpdf-binaries-master工具，下載地址:https://github.com/coherentgraphics/cpdf-binaries

　　　　3、抽取單頁PDF文件的文本內容，使用ES生成全文索引

      二、前台閱讀界面

 

 

 

 

1、 左側是書簽列表，用ztree展示；中間是圖書展示，用的pdf.js，界面上面的按鈕是應客戶要求，做了修改；右側是檢索模塊。

2、點擊左側書簽，會顯示對應的圖書頁面，拆分后的單頁pdf文件名稱會以頁碼標識，這樣書簽就和單頁pdf關聯起來了。

這樣就解決了加載速度慢的問題！

三、下面說下前台閱讀界面開發碰到的問題

1. 當前設定一次縮放大小后點擊另一個書簽會回到默認大小，能否改成設定一次后不變

　　這是因為每次點擊另外個書簽，都是個新的pdf，縮放比例默認都是自動縮放

　　解決:直接在pdf.js的viewer.html文件里修改代碼

　　var $autoScale=$('#autoScale',window.parent.document);//在iframe標簽外部頁面定義,記錄當前pdf縮放比例
　　var $searchKey=$('#key',window.parent.document);//全文檢索的關鍵詞
　　var isReloadPage=false;//是否重新加載頁面

　　window.addEventListener('scalechange',function (event) {
    /**
     * pdf渲染界面查找出關鍵詞並且高亮顯示
     */
    var PDFFindBar = PDFViewerApplication.findController.findBar;
    var searchKey=$searchKey.val();
    PDFFindBar.findField.value = searchKey;
    PDFFindBar.highlightAll.checked= true;
    PDFFindBar.findNextButton.click();
    //end

    /**
     * pdf翻頁縮放比例保持不變
     */
    autoScale=$autoScale.text();
    if(!autoScale){
        $autoScale.text(PDFViewerApplication.currentScaleValue);
    }
    if(PDFViewerApplication.currentScaleValue == 'auto' && isReloadPage == true){
        $autoScale.text(PDFViewerApplication.currentScaleValue);
        return;
    }
    if(PDFViewerApplication.currentScaleValue == 'auto'){
        PDFViewerApplication.pdfViewer.currentScaleValue=autoScale;
    }
    if(autoScale != PDFViewerApplication.currentScaleValue){
        $autoScale.text(PDFViewerApplication.currentScaleValue);
    }
    isReloadPage=true;



});

2、原文界面全文檢索的關鍵詞沒有高亮顯示
　　說明：這個問題是點擊全文檢索，會在右側把檢索出的全文數據以表格的形式展示，展示字段有書簽名稱、檢索出的內容。然后點擊對應的檢索內容，中間顯示對應的pdf
　　解決:上面代碼以解決
3、使用ztree,樹形節點文本不能自動換行

<style>
    /*設置ztree節點span自動換行*/
    .ztree li span{
        white-space: normal;
        display: inline-block;
        margin-right: 10px;
    }
    /*設置ztree節點a標簽高度設置為自動*/
    .ztree li a{
        height: auto;
    }

    /*設置ztree節點被選中時高度設置為自動*/
    .ztree li a.curSelectedNode{
        height: auto;
    }
</style>