`

在web页面预览PDF文件

阅读更多

先说说基本思路:

1、点击某个文件名称的连接时获取到文件序号,即保存在文件表中的主键序号;

2、通过AJAX将序号传入到后台,从文件表中查询文件信息,并使用openOffice将文档转成PDF文件;

3、将文件流输出到web页面。

 

再说说我本地的环境:

1、文件上传之后会在数据库中插入一条数据,用来记录文件的基本信息,如文件名称、保存路径、文件大小,上传人,上传时间等;

2、openOffice的安装前面的文章已经说得很清楚了,有需要的可以看一下!

3、我这里是点击文件名称时获取文件名称判断是不是doc文档,若是,就转PDF。若是图片或PDF文件就直接预览。否则,提示下载。

4、服务器端必须安装openOffice,客户端必须安装Adobe公司的PDF阅读器。若安装其他的PDF阅读器,如福昕,可能会出现不能预览只能下载的情况。

 

具体代码如下:

1、鼠标点击时获取文件信息并判断文件类型:

$("table>tbody>tr>td>a.fileDown").live("click",function(){
	var fileid=jQuery.trim($(this).attr("fileId"));//文件序号
	if(fileid!=""){
		//1、判断文件是否为doc文件、pdf文件
		var fileName = $(this).text();//获取文件名称
		var sign = validateDocType(fileName);
		if(sign>0){//说明是可以打开的文件
			//2、在新的选项卡中打开
			buildTab("openDocInPdf.jsp?fid="+fileid+"&sign="+sign,fileName);
 			return false;
		}else{
			//不是word/pdf/图片文档,那么不打开进行提醒
			if(confirm('当前文档不是word、pdf文档,不允许打开!\n是否进行下载?')){
				fileDownload(fileid);
			}
		}
	}
});

/**
 * 该方法通过文档的后缀名判断文件类型
 * @param fileName:含有后缀名的文档
 * @return sign:0-表示不是可以用pdf打开的文档 1-word文档 2-pdf文件 3-图片
 * **/
function validateDocType(fileName){
	if(isempty(fileName)){ return 0;}
	if((/(?:doc|docx)$/i.test(fileName))){
		return 1;
	}else if((/(?:pdf)$/i.test(fileName))){
		return 2;
	}else if((/(?:jpg|gif|png|jpeg|bmp)$/i.test(fileName))){
		return 3;
	}else{
		return 0;
	}
}

2、openDocInPdf.jsp的body中什么内容都不要写,直接加载JS即可。

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
	var fid = '${param.fid}';
	var sign = '${param.sign}';//1-word文档 2-pdf文件 3-图片
	$(function(){
		if(sign=="1" || sign=="2"){
			var src="fileRouter!openDocInPdf.action?id="+fid+"&flag=2&time="+new Date().getTime();
			//alert(document.getElementsByTagName("body").length+"\n"+src);
			$("body").html("<iframe  width='100%' height='100%' src='"+src+"' />");
		}else if(sign=="3"){//说明是图片
			getFileInfoInAjax(fid);
		}
	});
	
	//该方法用来加载图片信息
	function getFileInfoInAjax(fid){
		$.ajax({
			type:"POST",
			async:false,
			data:{"id":fid,"flag":"1","time":new Date().getTime()},
			dataType:"text",
			url:"fileRouter!openDocInPdf.action",
			error:function(XMLHttpRequest, textStatus, errorThrown) {
				alert("加载错误,错误原因:\n"+errorThrown);
			},
			success:function(serverData){
				var data2 = serverData.toString();
				if((data2+"").indexOf("fail")>-1){//说明是错误信息
					data2 = data2.replace("fail","");
				}else{
					//alert("返回的数据:"+serverData);
					var data = $.parseXML(serverData);
					var fileid = $(data).find("fileid").text();//文件序号
					var filename = $(data).find("filename").text();//文件名
					var filepath = $(data).find("filepath").text();//文件路径
					filepath = filepath.replace("D:","");
					$("body").html("<img src='"+filepath+"' width='100%' height='100%'/>");
				}
			}
		});
	}
</script>

 

3、action处理:

/**
 * 注意:该方法需要安装openOffice并将openOffice设置为开机自启动的服务
 * **/    
/**
 * 该方法用来加载并显示文件
 * @param id:文件序号
 * @param flag:文件类型 1-图片格式 2-office格式
 * */
public String openDocInPdf() throws Exception{
	HttpServletRequest request = ServletActionContext.getRequest();
	HttpServletResponse response = ServletActionContext.getResponse();
	String result="";
	try{
		//1、校验是否登录
		Object userInfo = request.getSession().getAttribute("userInfo");
		if(userInfo==null) throw new TspException("用户信息获取失败,userInfo=null");
		
		//2、获取文件序号
		Integer id = Integer.parseInt(request.getParameter("id"));
		Integer flag = Integer.parseInt(request.getParameter("flag"));
		
		//3、获取文件路径
		com.wjl.ExecSQL execSQL = (com.wjl.ExecSQL) com.wjl.SpringApplicationContextHolder.getSpringBean("ExecSQL");//获取ExecSQL的bean
		List<Object[]> fileList = execSQL.selectQuery2("select top 1 ID,[filepath],[filename] from S_FILE where ID="+id+";");
		if(fileList!=null && fileList.size()>0){
			Object[] obj = fileList.get(0);
			String fileid = obj[0].toString();//文件序号
			String filePath = obj[1].toString();//文件路径
			String fileName = obj[2].toString();//文件名称
			logger.debug("请求路径:" + ServletActionContext.getServletContext().getRealPath(""));
			logger.debug("文件编号:" + fileid);
			logger.debug("文件名称:" + fileName);
			logger.debug("文件路径:" + filePath);
			
			//4、校验文件自否存在
			if(!(filePath.indexOf("bfp")>-1)){//说明不在指定的文件存储的物理盘符上,而是存在webRoot下
				filePath = request.getRealPath("/")+filePath;
			}
			
			File loadFile = new File(filePath);
			if(!loadFile.exists()){
				throw new TspException("没有找到您需要的资源:" + fileName+" !");
			}
			
			if(flag==2){//说明是office文件
				//4、校验pdf文件是否存在
				String pdfName = loadFile.getName();//获取文件的名称
				pdfName = pdfName.substring(0,pdfName.lastIndexOf(".")+1)+"pdf";
				String pdfFilePath = loadFile.getParentFile().getAbsolutePath()+File.separator+pdfName;
				File pdfFile = new File(pdfFilePath);
				if(!pdfFile.exists()){//pdf文件不存在,那么需要进行转换,将当前文档转成pdf
					//5、生成pdf文件
			         officeToPdf(loadFile,pdfFile);
				}
				//6、加载pdf文件至页面
				response.setContentType("application/pdf");
				FileInputStream in = new FileInputStream(pdfFile);
				OutputStream out = response.getOutputStream();
				byte[] b = new byte[1024];
				while ((in.read(b)) != -1) {
					out.write(b);
				}
			
				out.flush();
				in.close();
				out.close();
			}else{
				StringBuffer fileStr = new StringBuffer();
				fileStr.append("<file>")
    			.append("<result>successed</result>")
    			.append("<fileid>"+fileid+"</fileid>")
    			.append("<filename>"+fileName+"</filename>")
    			.append("<filepath>"+filePath+"</filepath>" )
    			.append("</file>");
				result = fileStr.toString();
			}
		}
	}catch(TspException e){
		writeLogger("以PDF格式打开文件",e);
		e.printStackTrace();
		result="fail"+e.getMessage();
	}finally{
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html");
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Cache-Control", "no-store");
		response.setDateHeader("Expires", 0);
		response.getWriter().write(result);
		response.getWriter().flush();
		response.getWriter().close();
	}
	return null;
}

/**
 * 该方法用来转成PDF文件
 * @param inputFile:转变成pdf文件的文件
 * @param outputFile:PDF文件对象
 * */
public void officeToPdf(File inputFile,File outputFile) {   
    // 链接 一个运行在8100端口的OpenOffice.org 实例  
    OpenOfficeConnection connection = new SocketOpenOfficeConnection(8100);   
    try {   
        connection.connect();   //进行连接
        // 创建一个converter对象并转换格式
        DocumentConverter converter = new OpenOfficeDocumentConverter(connection);   
        converter.convert(inputFile, outputFile);   
    } catch (ConnectException cex) {   
        cex.printStackTrace();   
    } finally {   
        if (connection != null) {   
            connection.disconnect(); //关闭连接  
            connection = null;   
        }   
    }   
}

/**
 * 该方法用来往日志文件中写日志信息
 * @author wjl
 * @date 2016-5-1
 * @param msg:提醒信息
 * @param e:需要写入的错误信息
 * */
public void writeLogger(String msg,Exception e){
	logger.error("---------------------------------------------------------------------\r\n");
	logger.error(msg+"时发生异常:\n");
	logger.error("时间:"+new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())+"\r\n");//记录时间
	logger.error("错误信息:\r\n");
	logger.error(e, e);
	logger.error("---------------------------------------------------------------------\r\n");
}

 

分享到:
评论

相关推荐

    pdf.js在java web项目中远程预览ftp上的pdf文件.docx

    pdf.js插件是一个功能强大且轻量级的PDF查看器,可以在Web浏览器中预览PDF文件。需要下载并解压pdf.js插件, 并将其配置到项目中。 ### 3. 跨域访问的配置 为了使pdf.js插件可以跨域访问,需要将其配置文件中的...

    Java web使用pdf.js在线预览远程服务器上的pdf文件

    在现代Web应用中,用户可能需要在线预览PDF文件,而不是下载后再查看。"Java Web使用pdf.js在线预览远程服务器上的pdf文件"这个主题涵盖了如何利用pdf.js库实现在Web环境中流畅、安全地预览PDF文档。pdf.js是Mozilla...

    SpringBoot在线预览PDF文件

    本项目的核心是实现PDF在线预览功能,它利用了SpringBoot的Web服务特性,结合PDF.js库来实现在浏览器中预览PDF文件。 首先,我们需要理解SpringBoot的Web开发基础。SpringBoot内置了对HTTP请求处理的支持,通过创建...

    可以在线预览pdf文件

    标题中的“可以在线预览pdf文件”指的是使用特定的技术或工具实现通过网页浏览器查看PDF文档的功能,无需用户下载文件到本地。这通常涉及到前端技术,尤其是JavaScript库,因为浏览器端的处理能力有限,需要借助这样...

    无插件H5,web预览pdf.zip

    "无插件H5,web预览pdf.zip"文件提供的解决方案就是利用纯JavaScript技术,在不依赖任何外部插件的情况下实现在H5网页和移动App Webview中预览PDF文档,同时也适用于PC端的浏览器。下面我们将详细探讨这一技术实现的...

    基于PDF.js的pdf文件预览.rar

    在IE中预览PDF文件是许多开发者面临的挑战,因为IE浏览器的默认PDF查看器可能不支持或者性能不佳。PDF.js通过其强大的兼容性解决了这个问题,可以确保在IE以及其他主流浏览器中一致地展示PDF内容。对于IE的支持,PDF...

    JSP页面显示PDF,根据PDF路径在JSP页面显示PDF

    标题“JSP页面显示PDF,根据PDF路径在JSP页面显示PDF”意味着我们要依据PDF文件在服务器上的存储路径来生成预览链接。以下是实现这一功能的一般步骤: 1. **获取PDF路径**:首先,你需要知道PDF文件在服务器上的...

    网页实现图片和PDF文件预览

    4. **预览PDF**:预览PDF文件则复杂一些,因为浏览器对PDF的原生支持有限。一种常见方法是使用`&lt;iframe&gt;`加载PDF.js库,这是一个开源项目,能够将PDF解析成可渲染的HTML5 Canvas元素。首先,需要在服务器上部署PDF....

    jquery.media在线预览pdf文件

    当涉及到在线预览PDF文件时,jQuery可以作为一个强大的工具,结合其他插件或技术来实现这一功能。本篇文章将深入探讨如何利用jQuery和相关插件,特别是jQuery.media,来实现PDF文件的在线预览。 标题"jquery.media...

    pdf.js使用文件流预览pdf

    总的来说,通过使用PDF.js的文件流预览功能,开发者可以创建一个高效且兼容性强的Web应用,让用户在浏览器中流畅地预览PDF文件。这在处理大量或大尺寸PDF时尤其有益,因为它减少了内存占用,提高了加载速度。在实际...

    uniapp移动端H5在线预览PDF等文件实现源码及注解

    在预览PDF的场景中,uniapp并没有直接提供预览PDF的组件,因此我们需要借助HTML5的Web技术,如`&lt;iframe&gt;`或`&lt;object&gt;`元素,以及第三方库如PDF.js来实现。 PDF.js是Mozilla基金会开源的一个JavaScript库,专门用于...

    pdf.js前端插件,用于在线预览pdf文件

    - **离线预览**:用户可以在离线状态下预览PDF文件,只要文件已缓存。 - **自定义集成**:PDF.js可以轻松地与现有的Web应用程序集成,提供灵活的API和配置选项。 2. **使用步骤**: - **引入库**:首先,需要在...

    把PDF文件展示在前端页面

    在现代Web应用中,将PDF文件直接在前端页面展示给用户是一种常见的需求,尤其是在文档分享、在线阅读和教育领域。本篇文章将详细讲解如何利用给定的`touchpdf-master`压缩包来实现这一功能。 首先,`touchpdf-...

    html5预览pdf文档

    在现代Web开发中,预览PDF文档已经成为一个常见的需求,特别是在需要在线查看文档的场景下。HTML5提供了强大的新功能,使得在浏览器中预览PDF成为可能,无需依赖额外的插件或第三方服务。本示例就是这样一个实现,...

    jsp在线浏览pdf文件的jar包和插件

    在JavaWeb开发中,有时我们需要实现用户在浏览器中直接预览PDF文件,而无需下载到本地。"jsp在线浏览pdf文件的jar包和插件"就是解决这个问题的一种方案。这个资源提供了一个便捷的方法,允许开发者将PDF预览功能快速...

    web在线查看PDF文件 PDF.JS

    PDF.js是Mozilla开发的一个开源JavaScript库,专门用于在Web浏览器中查看PDF文件,无需依赖任何外部插件。这个库的设计目标是提供一个跨平台、安全且高性能的解决方案,让用户能够无缝地在线预览PDF文档。它完全基于...

    在线预览PDF文件(并将上传Office文件转为PDF文件)

    首先,在线预览PDF文件的技术实现主要依赖于Web浏览器的插件或JavaScript库。例如,Adobe提供了一个名为PDF.js的开源库,它可以在浏览器环境中渲染PDF文档。该库利用HTML5的Canvas元素将PDF页面分解为图像,然后逐帧...

    全端兼容的前端h5预览pdf插件

    在现代Web开发中,预览PDF文件是一项常见的需求,尤其对于提供在线文档服务的网站来说更是必不可少。"全端兼容的前端H5预览PDF插件"为开发者提供了一个便捷的解决方案,它允许用户在PC和移动设备上无缝地查看PDF文档...

    js实现html中的pdf文件的在线预览、下载、打印等功能

    1. **PDF.js**:由Mozilla开发的PDF.js是一个强大的开源库,它允许在浏览器中以纯JavaScript方式渲染PDF文件,无需任何插件。PDF.js的核心目标是提供高质量的PDF文件预览体验。 2. **PDFObject**:这是一个轻量级的...

    web预览pdf插件,pdf.js(html5)

    PDF.js是Mozilla开发的一个开源项目,它允许...总的来说,PDF.js是Web开发者在实现PDF预览功能时的强大工具。通过理解和掌握其工作原理及使用方法,可以为用户提供无缝的PDF查看体验,同时保持Web应用的安全性和性能。

Global site tag (gtag.js) - Google Analytics