这两天因业务需要,做了个在线预览的功能。其实在线预览本身并不复杂,只要调用相应的控件即可完成。
因为文件在FTP服务器上,所以我现将FTP服务器上相对应的文件下载到本地工程文件夹里(resource/pdf/),然后再在本地通过OpenOffice将word文件(本文以word为例)转换成PDF文件,在JSP页面通过pdfobject.js将resource/pdf/下对应的文件取出,预览。不多说,直接上流程。
1)下载OpenOffice4.1.1,安装
OpenOffice下载
2)开启Openoffice服务
cd C:\Program Files (x86)\OpenOffice 4\program
soffice -headless -accept=”socket,host=127.0.0.1,port=8100;urp;” -nofirststartwizard
3)如果客户端没有Adobe Reader的话,需要下载。(自己百度adobe reader下载)
4)下载pdfobject.js(显示pdf插件)
pdfobject.js下载
5)下载jodconverter.jar(用户word转pdf)
jodconverter.jar下载
工具类下好之后直接上代码:
jsp页面:
当点击预览的时候,直接调用JS预览方法showWord(value)
(*value为要预览文件的编号,通过编号去取需要预览的文件的文件名,我们这边需要重新打开一个页面)
function showWord(value){ var id = $(value).attr("val"); var url = "<c:url value='/annex/showWord.htm?singleID="+id+"'/>"; var x = (screen.availWidth - 1000) / 2; var y = (screen.availHeight - 600) / 2; var sw = 1000; var sh = 600; var win = window.open(url, '预览', 'width='+sw+',height='+sh+',top='+y+',left='+x+',location=no,scrollbars=yes,resizable=no,allwaysRaised'); win.focus(); }
java代码:(本地方将重点标注一下FTP文件下载到本地已经本地word文档转pdf的操作,其它忽略)
1)此处先是获取FTP文件路径
@RequestMapping(value = "showWord") public String showWord(HttpServletRequest request, ModelMap model, String singleID) throws UnsupportedEncodingException { // 获取FTP路径 String ftpUrlAddr = "ftp://" + SqlProperties.getValue("username") + ":" + SqlProperties.getValue("password") + "@" + SqlProperties.getValue("url") + ":" + Integer.parseInt(SqlProperties.getValue("port")) + "/" + SqlProperties.getValue("localimg");
2)获取预览文件的文件名称
// 获取所要预览文件的文件名String sql = SqlProperties.getValue("getfileName");sql += " and SINGLEID = " + singleID;List<Map<String, Object>> fileList = this.baseServiceImpl .queryForListOrMap(sql, null);String docuName = fileList.get(0).get("FILENAME").toString(); String[] realNames = docuName.split("\\|");
3)中文可能存在一点点小问题,还在研究,所以暂时通过转码来获取pdf文件名称。
//中国可能存在一点点小问题,还在研究,所以暂时通过转码来获取pdf文件名称String pdfFile = realNames[0].substring(0, realNames[0].lastIndexOf("."))+ ".pdf";pdfFile = URLEncoder.encode(pdfFile);
4)获取word和pdf的绝对路径
//pdf文件路径String path = userDir + "resource/pdf/" + pdfFile;//word文件路径String resourceFile = userDir + "resource/pdf/" + realNames[0].toString();File fileForPdf = new File(path);File fileForWord = new File(resourceFile);
5)判断本地是否存在可以查看的pdf文件,如果有,则直接获取文件。返回pdf文件的文件名称至JSP页面
if (fileForPdf.exists()) { model.put("pdfFile", pdfFile); return "/File/documentView"; }
6)如果文件不存在则要通过FTP直接下载至本地,然后做转换。(此处切记:必须开启openOffice服务)
String ftpPath = ftpUrlAddr + "/" + realNames[0].toString();InputStream is = null;OutputStream os = null;try { URL url = new URL(ftpPath); is = url.openStream(); os = new FileOutputStream(resourceFile); byte bf[] = new byte[1024]; int length = 0; while ((length = is.read(bf, 0, 1024)) != -1) { os.write(bf, 0, length); } is.close(); os.close();} catch (MalformedURLException e) { result = 9; System.out.println("URL协议、格式或者路径错误");} catch (FileNotFoundException e) { result = 9; System.out.println("没有找到对应文件");} catch (IOException e) { result = 9; System.out.println("文件流输入输出有问题");}OpenOfficeConnection connection = new SocketOpenOfficeConnection(8100);File pathFile = new File(path);File resourceFiles = new File(resourceFile);System.out.println(resourceFiles.exists());try { connection.connect(); DocumentConverter converter = new OpenOfficeDocumentConverter(connection);converter.convert(resourceFiles, pathFile);connection.disconnect();} catch (ConnectException e) { e.printStackTrace(); System.out.println("OpenOffice服务未启动");}model.put("pdfFile", pdfFile);return "/File/documentView";
7)转换完成之后,你就会在webapps/resource/pdf/下面看到你转换过的文件了,然后进入到JSP页面(记得要引入pdfobject.js哦,${pdfFile}就是你传过来的文件名称)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>在线预览</title> <script type="text/javascript" src="<c:url value='/resource/js/pdfobject.js'/>"></script> <script type="text/javascript"> window.onload = function (){ var success = new PDFObject({ url: "<c:url value='/resource/pdf/${pdfFile}'/>"}).embed(); }; </script></head><body></body></html>
最后看一下效果!
预览效果
联系客服