pdf.js预览pdf文档

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行处代码：