文章目录

  • 一、转换pdf方式（推荐）
  • 二、pageoffice
  • 三、openofffice方式

一、转换pdf方式（推荐）

说明：该方式采用插件（Aspose.Words）将文件转化为pdf文件（需要转化到web服务器的下面），然后再使用浏览器自带的pdf查看器进行文件预览（缺点：只可用于word及pdf文件）。

  • 前端调用代码
 AttachMent.previewFile=function(obj,fileId){
	var callback = function(data){
		var dataObj = new com.ibms.form.ResultMessage(data);
		var filePath = dataObj.data.filePath;
		var fileType = dataObj.data.fileType;
		if(filePath == 'none'){
			_layer.msg("文件不存在！", {
				time: $lang.tip.time,
				shade: $lang.tip.shade
			});
		}else{
			var title = '在线预览';
			var width = $(window.top).width()*.9;
			var height = $(window.top).height()*.9;
			var url = __ctx + "/oa/system/sysFile/preview.do?fileId="+fileId;
			if('doc,docx,pdf'.indexOf(fileType) != '-1'){//文件转为pdf
				url += "&url=oa/system/sysFilePDFPreview.jsp";
 	            var width = $(window.top).width()*1;
	            var height = $(window.top).height()*1;
                var title="在线预览";
 	            DialogUtil.open({
 		            height:height,
 		            width: width,
 		            url: url,
 		            isResize: true,
 		            showMax: false,                             //是否显示最大化按钮 
 	                showToggle: false,                         //窗口收缩折叠
 	                title: title,
 	                showMin: false,
 		            sucCall:function(rtn){
 			            //rtn作为回调对象，可进行定制和扩展
 			            if(!(rtn == undefined || rtn == null || rtn == '')){
 				
 			            }
					}
 	            });
			}else{
			    _layer.msg("暂时不支持该文件预览！", {
				    time: $lang.tip.time,
				    shade: $lang.tip.shade
			   });
			}
		}
    };
    this.isExistFile(fileId, callback);
 };
  • sysFilePDFPreview.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun/jstl/core_rt" prefix="c"%>
<%
    String contextPath = request.getContextPath();
%>
<html>
<head>
	<title>文件在线预览</title>
	<script type="text/javascript" src="<%=contextPath%>/jslib/jquery/jquery.js"></script>
	<script type="text/javascript" src="<%=contextPath%>/jslib/jquery/jquery.media.js"></script>
	<script type="text/javascript">
$(function() {
	
	$('a.media').media( {
		width : document.body.clientWidth-50,
		height : document.body.clientHeight-50
	});
	
    var resize;
	$(window).resize(function() {
        resize = setTimeout(function() {
           setPageSize()
        }, 50);
    });
    
    
});
function setPageSize(){
	$("#fileDiv").find("div").css("width", document.body.clientWidth-50);
	$("#fileDiv").find("iframe")[0].width = document.body.clientWidth-50;
	$("#fileDiv").find("iframe")[0].height = document.body.clientHeight-50;
}
</script>
</head>
<body>
	<div align="center" id="fileDiv">
		<a class="media" href="<%=contextPath%>/${filePath}"></a>
	</div>
</body>
</html>
  • 后端关键代码
/**
	 * 文件预览
	 * 
	 * @param request
	 * @param response
	 * @return
	 */
	@RequestMapping("preview")
	@Action(description = "文件预览")
	public ModelAndView preview(HttpServletRequest request,
			HttpServletResponse response) {

		ModelAndView modelView = null;
		String contextPath =request.getContextPath();
		try {
			String fileId = RequestUtil.getString(request, "fileId");
			modelView = new ModelAndView(RequestUtil.getString(request, "url"));
			SysFile sysFile = sysFileService.getById(Long.valueOf(fileId));
			String filePath = sysFile.getFilepath();
			String fileType = sysFile.getExt();
			String fileName = sysFile.getFilename() + "." + sysFile.getExt();
		    
			String tempFilePath = AppUtil.getRealPath("/media/")+fileId+".pdf";
			System.out.println("filePath>>>>>>>>>"+filePath);
			File tempFile = new File(tempFilePath);
			if(tempFile.exists()){
				modelView.addObject("filePath", "/media/"+fileId+".pdf");
				return modelView;
			}
			
			modelView.addObject("fileId", fileId);
			modelView.addObject("fileName", fileName);
			modelView.addObject("fileType", fileType);
			if("doc,docx".contains(fileType.toLowerCase())){//word文件转换为pdf
				 // 附件保存路径
                 String fullPath = filePath.replace("/", File.separator);
				 Document document = new Document(fullPath);
	             File pdffile = new File(tempFilePath);
	             FileOutputStream stream = new FileOutputStream(pdffile);
	             document.save(stream, SaveFormat.PDF); 
	             stream.close();
			}
			if("pdf".contains(fileType.toLowerCase())){//pdf位置变化
				 // 附件保存路径
                 String fullPath = filePath.replace("/", File.separator);
				 FileUtil.copyFile(fullPath, tempFilePath);
			}
			modelView.addObject("filePath", "/media/"+fileId+".pdf");
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		return modelView;
	}

二、pageoffice

说明：该方式需要使用pageoffice插件进行文件的预览（缺点：需要每台电脑装一下pageoffice预览的插件，需要付费，支持office格式）。

  • 前端调用代码
//调用格式 <a href="####" οnclick="AttachMent.previewFile(this,1030000004530003);"><span id="filespan"></span>fileName</a>
 AttachMent.previewFile=function(obj,fileId){
	var callback = function(data){
		var dataObj = new com.ibms.form.ResultMessage(data);
		var filePath = dataObj.data.filePath;
		var fileType = dataObj.data.fileType;
		if(filePath == 'none'){
			_layer.msg("文件不存在！", {
				time: $lang.tip.time,
				shade: $lang.tip.shade
			});
		}else{
			var title = '在线预览';
			var width = $(window.top).width()*.9;
			var height = $(window.top).height()*.9;
			if('doc,docx,ppt,pptx,xls,xlsx,pdf'.indexOf(fileType) != '-1'){
				$.ajax({
	            	url:__ctx + "/oa/qmshzy/pageoffice/getPreviewUrl.do",
	            	data:{
	            		fileId:fileId,
	            		width:width,
	            		height:height
	            	},
	            	success:function(href){
	            		debugger;
	            		$(obj).attr("href",href);
	            		$(obj).attr("onclick","");
	    				$(obj).find("#filespan").click();
	            	}
	            });
			}else{
			    _layer.msg("暂时不支持该文件预览！", {
				    time: $lang.tip.time,
				    shade: $lang.tip.shade
			   });
			}
		}
    };
    this.isExistFile(fileId, callback);
 };
  • 后端关键代码
/**
	 * 生成pageOffice预览链接-文件预览
	 * @param request
	 * @param response
	 * @throws IOException 
	 * @throws SQLException 
	 * @throws ClassNotFoundException 
	 */
	@RequestMapping("getPreviewUrl")
	public void getPreviewUrl(HttpServletRequest request,
			HttpServletResponse response) throws IOException, ClassNotFoundException, SQLException {
		String fileId = RequestUtil.getString(request, "fileId");//数据库中存储的文件Id
		String width = RequestUtil.getString(request, "width");//窗口宽度
		String height = RequestUtil.getString(request, "height");//窗口高度
		String url = "/oa/qmshzy/pageoffice/preViewPageOffice.do?fileId="+fileId;
		response.setCharacterEncoding("UTF-8");
		String previewUrl = PageOfficeLink.openWindow(request, url, "width=" + width + "px;height=" + height + "px;");
		response.getWriter().append(previewUrl);
	}
	
	/**
	 * 通过pageOffcie实现预览-文件预览
	 * @param request
	 * @param response
	 * @return
	 */
	@RequestMapping("preViewPageOffice")
	public ModelAndView preViewPageOffice(HttpServletRequest request, HttpServletResponse response) {
		ModelAndView mv = null;
		String fileId = RequestUtil.getString(request, "fileId");
		SysFile curSysFile = sysFileService.getById(Long.parseLong(fileId));
		String filePath = "";
		String ext = "";
		if(curSysFile != null){
			filePath = curSysFile.getFilepath();
			ext = curSysFile.getExt();
			// 附件保存路径
            String attachPath = AppUtil.getAttachPath();
            filePath = attachPath + File.separator + filePath;
		}
		
		//主要的(针对word、excel、ppt)
		PageOfficeCtrl poCtrl1 = new PageOfficeCtrl(request);
		//设置服务器界面
		poCtrl1.setServerPage(request.getContextPath()+"/poserver.zz");
		poCtrl1.setJsFunction_AfterDocumentOpened( "AfterDocumentOpened()");
		
		poCtrl1.setCaption("预览详情");
		poCtrl1.setTitlebar(false); //隐藏标题栏
		poCtrl1.setMenubar(false); //隐藏菜单栏
		poCtrl1.setOfficeToolbars(false);//隐藏Office工具条
		poCtrl1.setCustomToolbar(false);//隐藏自定义工具栏
		poCtrl1.setAllowCopy(false);
		//打开文件
		if ("doc".equals(ext) || "docx".equals(ext)) {
			poCtrl1.webOpen(filePath, OpenModeType.docReadOnly, "");
			mv = new ModelAndView("/oa/hzy/pageoffice/pageOfficePreview.jsp");
			poCtrl1.setTagId("PageOfficeCtrl1"); //此行必须
			return mv.addObject("fileId", fileId)
			    .addObject("filePath",filePath)
			    .addObject("poCtrl1",poCtrl1);
		} else if ("xls".equals(ext) || "xlsx".equals(ext)) {
			poCtrl1.webOpen(filePath, OpenModeType.xlsReadOnly, "");
			mv = new ModelAndView("/oa/hzy/pageoffice/pageOfficePreview.jsp");
			poCtrl1.setTagId("PageOfficeCtrl1"); //此行必须
			return mv.addObject("fileId", fileId)
			    .addObject("filePath",filePath)
			    .addObject("poCtrl1",poCtrl1);
		} else if("ppt".equals(ext)){
			poCtrl1.webOpen(filePath, OpenModeType.pptReadOnly, "");
			mv = new ModelAndView("/oa/hzy/pageoffice/pageOfficePreview.jsp");
			poCtrl1.setTagId("PageOfficeCtrl1"); //此行必须
			return mv.addObject("fileId", fileId)
				.addObject("filePath",filePath)
				.addObject("poCtrl1",poCtrl1);
		}else if("pdf".equals(ext)){
			//针对pdf
			PDFCtrl pdfCtrl1 = new PDFCtrl(request);
			pdfCtrl1.setServerPage(request.getContextPath()+"/poserver.zz"); //此行必须

			pdfCtrl1.setCaption("预览详情");

			//pdfCtrl1.addCustomToolButton("打印", "Print()", 6);
			pdfCtrl1.addCustomToolButton("隐藏/显示书签", "SetBookmarks()", 0);
			pdfCtrl1.addCustomToolButton("-", "", 0);
			pdfCtrl1.addCustomToolButton("实际大小", "SetPageReal()", 16);
			pdfCtrl1.addCustomToolButton("适合页面", "SetPageFit()", 17);
			pdfCtrl1.addCustomToolButton("适合宽度", "SetPageWidth()", 18);
			pdfCtrl1.addCustomToolButton("-", "", 0);
			pdfCtrl1.addCustomToolButton("首页", "FirstPage()", 8);
			pdfCtrl1.addCustomToolButton("上一页", "PreviousPage()", 9);
			pdfCtrl1.addCustomToolButton("下一页", "NextPage()", 10);
			pdfCtrl1.addCustomToolButton("尾页", "LastPage()", 11);
			pdfCtrl1.addCustomToolButton("-", "", 0);

			pdfCtrl1.webOpen(filePath);
			mv = new ModelAndView("/oa/hzy/pageoffice/pageOfficePDFPreview.jsp");
			pdfCtrl1.setTagId("PDFCtrl1"); //此行必须
			return mv.addObject("fileId", fileId)
				.addObject("filePath",filePath)
				.addObject("pdfCtrl1",pdfCtrl1);
		}
		return mv;
	}

三、openofffice方式

说明：该方式需要使用openoffice软件进行文件的预览，同样是进行转换swf（需要在服务器安装openoffice软件，支持doc,docx,ppt,pptx,xls,xlsx,pdf,jpg,png,gif,bmp,txt）。

  1. 前端调用代码
<a href="####" onclick="AttachMent.previewFile(this,1030000004530003);"><span id="filespan"></span>fileName</a>

 AttachMent.previewFile=function(obj,fileId){
	var callback = function(data){
		var dataObj = new com.ibms.form.ResultMessage(data);
		var filePath = dataObj.data.filePath;
		var fileType = dataObj.data.fileType;
		if(filePath == 'none'){
			_layer.msg("文件不存在！", {
				time: $lang.tip.time,
				shade: $lang.tip.shade
			});
		}else{
			var title = '在线预览';
		    var url = __ctx + "/openoffice/file/preview.do?fileId="+fileId;
			if('doc,docx,ppt,pptx,xls,xlsx,pdf,jpg,png,gif,bmp,txt'.indexOf(fileType) != '-1'){
				var width = $(window.top).width()*1;
	            var height = $(window.top).height()*1;
                var title="在线预览";
 	            DialogUtil.open({
 		            height:height,
 		            width: width,
 		            url: url,
 		            isResize: true,
 		            showMax: false,                             //是否显示最大化按钮 
 	                showToggle: false,                         //窗口收缩折叠
 	                title: title,
 	                showMin: false,
 		            sucCall:function(rtn){
 			            //rtn作为回调对象，可进行定制和扩展
 			            if(!(rtn == undefined || rtn == null || rtn == '')){
 				
 			            }
					}
 	            });
			}else{
			    _layer.msg("暂时不支持该文件预览！", {
				    time: $lang.tip.time,
				    shade: $lang.tip.shade
			   });
			}
		}
    };
    this.isExistFile(fileId, callback);
 };
  1. 后端调用代码（太多了,略）
    openOffice预览代码下载

更多推荐

java项目文件预览的几种方式