1.下载pdf.js
官网地址:http://mozilla.github.io/pdf.js/
CSDN地址:https://download.csdn.net/download/qq_37725650/12065917
2.运行示例
将解压后的文件夹直接丢到tomcat下 访问 ip:port/文件夹名称/web/viewer.html
显示的是 web 文件夹下的compressed.tracemonkey-pldi-09.pdf
3.修改默认打开PDF
我们只用修改viewer.js文件中的pdf路径参数即可:
var DEFAULT_URL = ‘09.pdf’;
如果pdf文件与viewer.html不在一层目录中,改成相对路径即可:
var DEFAULT_URL = ’ ../doc/ 09.pdf’;
4.viewer.html可以通过页面参数传值的方式加载pdf文件
http://127.0.0.1:8080/pdfjs/web/viewer.html?file=09.pdf
如果pdf文件与viewer.html不在一层目录中,改成相对路径即可:
http://127.0.0.1:8080/pdfjs/web/viewer.html?file=../doc/09.pdf
5.以上都是静态文件,一般我们都是从服务端获取,下面介绍如何预览服务端的文档
6.服务端代码
/**
* @date: 2019年12月30日 上午10:43:45
* @Description: 预览文件
* @param request
* @param response
*/
@RequestMapping(value = "/resume/preview", method = RequestMethod.GET)
public void previewResume(HttpServletRequest request, HttpServletResponse response) {
String fileName = request.getParameter("fileName");
String realFileName = request.getParameter("realFileName");
String fileType = request.getParameter("fileType");// "1"为临时文件,非"1"为正式文件
String key = request.getParameter("key");
String moduleName = request.getParameter("moduleName");
logger.info("previewResume start:fileName={},realFileName={},fileType={}", fileName, realFileName, fileType);
try {
if (fileName == null || fileName.equals("")) {
response.sendError(HttpServletResponse.SC_NOT_FOUND);
return;
}
String dir = null;
// 下载的是临时文件
if (fileType != null && fileType.equals("1")) {
dir = RequestPathUtils.buildTempFileDirPath() + File.separator + fileName;
} else {// 下载的是正式文件
if (moduleName.equals("") || moduleName == null) {// 正式文件必须要模块名称
response.sendError(HttpServletResponse.SC_NOT_FOUND);
return;
}
String serverKey = FileDownloadUtils.buildFileNameKey(fileName);
if (serverKey.equals(key)) {
dir = RequestPathUtils.buildFormalFileDirPath(moduleName, fileName) + File.separator + fileName;
} else {
response.sendError(HttpServletResponse.SC_NOT_FOUND);
return;
}
}
// 如果非pdf文档转为pdf
CommonAttachment attachment = new CommonAttachment(Word2PdfUtil.word2Pdf(dir,
RequestPathUtils.buildTempFileDirPath() + File.separator + realFileName + ".pdf"));
if ("pdf".equals(fileName.substring(fileName.indexOf('.') + 1))) {
attachment = new CommonAttachment(dir);
}
if (attachment.getFileSize() > 0) {
response.setContentType("application/octet-stream");
response.addHeader("Content-Disposition",
"attachment; filename=" + URLEncoder.encode(realFileName + ".pdf", "UTF-8"));
response.resetBuffer();
response.setContentLength((int) attachment.getFileSize());
byte[] buf = new byte[4096];
int readLength;
ServletOutputStream servletOS = response.getOutputStream();
InputStream inStream = attachment.getFileInputStream();
while (((readLength = inStream.read(buf)) != -1)) {
servletOS.write(buf, 0, readLength);
}
inStream.close();
servletOS.flush();
servletOS.close();
response.flushBuffer();
}
} catch (Exception e) {
logger.error("filed to preview pdf", e);
}
}
这里是我项目用到的,可根据修改,其中非pdf文档转换可参考下面地址:
https://blog.csdn.net/qq_37725650/article/details/103769113
7.前台访问预览
通过a标签点击事件:
<a style="text-decoration: none;" onclick="preview('${resume.resumePath}','${resume.applicantName}简历')" href="javascript:void(0);">${resume.applicantName}简历.${fn:substringAfter(resume.resumePath, '.')}</a>
事件方法:
function preview(resumePath,realFileName){
var url = "${ctx}/recruitment/recruitment/manager/resume/preview?fileName="+resumePath+"&fileType=1&realFileName="+realFileName;
window.open("${ctx}/resources/pdfjs/web/viewer.html?file="+encodeURIComponent(url))
}
8.注意事项
后台地址如有参数,需要编码:
encodeURIComponent(url)
点击此处下载,中文文件名会乱码,需要进行解码,修改/pdfjs/web/viewer.js1080行处代码:
添加文件名解码
这里文档属性,中文也是乱码:
需要进行解码,修改/pdfjs/web/viewer.js6107行处代码: