項目中整合pdf.js 在線預覽

1、首先下載pdf.js源碼，下載地址為：http://mozilla.github.io/pdf.js/

2、解壓放到自己的項目當中，位置自己選擇

3、前端html代碼

<iframe id="showPdf" src="static/pdfjs/web/viewer.html?file=preview.do?fileId=1111" style="width: 100%;height: 100%"></iframe>

4、訪問路徑可能因為傳參有兩個問號的問題，所以可能導致訪問prview接口fileId獲取不到的情況，所以需要對代碼做一些處理通過js去給src賦值

<iframe id="showPdf" src="" style="width: 100%;height: 100%"></iframe>

$(functoin(){
    var url = encodeURIComponent("preview.do?fileId=11111");
    $("#showPdf").attr("src","static/pdfjs/web/viewer.html?file="+url);
})

5、后端代碼

/**
     * 預覽pdf文件
     * @param fileName
     */
    @RequestMapping(value = "/preview", method = RequestMethod.GET)
    public void pdfStreamHandler(String fileName,HttpServletRequest request,HttpServletResponse response) {
 
        File file = new File("D:/temp/test01/0/"+fileName);
        if (file.exists()){
            byte[] data = null;
            try {
                FileInputStream input = new FileInputStream(file);
                data = new byte[input.available()];
                input.read(data);
                response.getOutputStream().write(data);
                input.close();
            } catch (Exception e) {
                logger.error("pdf文件處理異常：" + e.getMessage());
            }
 
        }else{
            return;
        }
    }

6、pdf.js不顯示電子簽章問題

      1）找到pdf.worker.js文件，搜索 if (data.fieldType === "Sig")  注釋掉  this.setFlags(_util.AnnotationFlag.HIDDEN)

       2）如果注釋掉上面的還沒有展示電子簽章的話 搜索 (0, _util.warn)('Unimplemented 定位到位置，修改代碼邏輯為：           

 if(fieldType !== "Sig") {
     (0, _util.warn)('Unimplemented widget field type "' + fieldType + '", ' + "falling back to base field type.");
      return new WidgetAnnotation(parameters);
   }

7、禁止使用右上角功能：找到viewer.html 搜索 toolbarViewerRight 將自己不使用的button添加style=“display: none”就可以了

 

 

8、下載功能是否可以調用項目接口呢？

        1）答案是可以的，在viewer.js中搜索 webViewerDownload ，這個是下載調用的函數，然后可以將其中的方法體重新，我是調用了父級的函數，如果調用不到需要在父級的函數上面添加top["win"]=window

 

 9、效果展示