项目中整合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、效果展示