pdf.js预览pdf文档

妖狐艹你老母 2023-06-26 05:51 28阅读 0赞

1.下载pdf.js

官网地址：[http://mozilla.github.io/pdf.js/][http_mozilla.github.io_pdf.js]

CSDN地址：[https://download.csdn.net/download/qq\_37725650/12065917][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][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)

![20191230172953238.png][]

点击此处下载，中文文件名会乱码，需要进行解码，修改/pdfjs/web/viewer.js1080行处代码：

添加文件名解码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzI1NjUw_size_16_color_FFFFFF_t_70][]

这里文档属性，中文也是乱码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzI1NjUw_size_16_color_FFFFFF_t_70 1][]

需要进行解码，修改/pdfjs/web/viewer.js6107行处代码：

![20191230173634577.png][]

[http_mozilla.github.io_pdf.js]: http://mozilla.github.io/pdf.js/
[https_download.csdn.net_download_qq_37725650_12065917]: https://download.csdn.net/download/qq_37725650/12065917
[https_blog.csdn.net_qq_37725650_article_details_103769113]: https://blog.csdn.net/qq_37725650/article/details/103769113
[20191230172953238.png]: https://img-blog.csdnimg.cn/20191230172953238.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzI1NjUw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191230173319602.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzI1NjUw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzI1NjUw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191230173456889.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzI1NjUw,size_16,color_FFFFFF,t_70
[20191230173634577.png]: https://img-blog.csdnimg.cn/20191230173634577.png