pdf.js預覽pdf文檔

原創

低调D树苗

2020-02-22 02:21

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;" οnclick="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)