1、首先下载pdf.js源码,下载地址为:PDF.js、稳定版:Release v2.0.943 · mozilla/pdf.js · GitHubPDF Reader in JavaScript. Contribute to mozilla/pdf.js development by creating an account on GitHub.https://github.com/mozilla/pdf.js/releases/tag/v2.0.943
或者自行下载:pdfjs_2.0.943.zip-其它文档类资源-CSDN下载
2、解压放到自己的项目当中,位置自己选择
3、前端html代码
<iframe id="showPdf" src="static/pdfjs/web/viewer.html?file=preview.do?fileId=1111" style="width: 100%;height: 100%"></iframe>
4、后端代码
/**
* 预览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;
}
}
5、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);
}
6、路径可能因为有两个问号的问题,所以可能导致访问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);
})
7、禁止使用右上角功能:找到viewer.html 搜索 toolbarViewerRight 将自己不使用的button添加style=“display: none”就可以了
8、下载功能是否可以调用项目接口呢?
1)答案是可以的,在viewer.js中搜索 webViewerDownload ,这个是下载调用的函数,然后可以将其中的方法体重新,我是調用了父级的函数,如果调用不到需要在父级的函数上面添加top["win"]=window
9、效果展示