首页 > 代码库 > SpringMVC+springSecurity+flexPaper 配置--类似百度文库在线预览
SpringMVC+springSecurity+flexPaper 配置--类似百度文库在线预览
背景:现在项目需要做一个类似百度文库的在线预览功能,在网上找了下很多人推荐使用FlexPaper,所以今天尝试学习了FlexPaper顺便集成到现有的框架中
由于网上目前的说的都不是很详细,所以现在记录在此,希望对需要的人有所帮助
准备:1. FlexPaper_2.2.4.zip 下载地址:http://flexpaper.devaldi.com/download/
2.swftools 下载地址:http://www.swftools.org/download.html
3.openoffice4.1 下载地址http://www.openoffice.org/download/index.html
4.OpenDocument文档转换器 JODConverter 下载地址:http://sourceforge.net/projects/jodconverter/files/
备注:现在貌似sourceforge.net访问不是很稳定被高墙堵在外面了,需要爬墙,我这边由于使用的是maven工程所以直接就在仓库中下载了
现有系统架构:SpringMVC+springSecurity
步骤:1.安装swftools 首先我们要安装swftools作用是将pdf转换为swf文件以便flexpaper播放,这个windows环境下载下来的就是一个exe直接next就行了
2.安装openOffice 是开源免费的文字处理软件,它可以将office文档转成pdf文件
安装完openoffice后必须启动其server,以命令行方式启动openoffice server。进入cmd命令行提示符D:\Program Files\OpenOffice.org 3\program\
键入如下命令:
soffice -headless -accept="socket,host=127.0.0.1,port=8100;urp;" –nofirststartwizard
备注:由于我本机环境是win8的今天在安装的时候都是默认安装在c盘后来在进行openoffice启动的时候服务一直无法启动后来发现可能由于win8对于c盘安全权限的问题后来重装后在d盘重新命令执行,ok服务启动
上述准备工作完成后我们来进行开发,首先我们写一个Controller ,主要是预览跳转链接用的
package com.cmcc.zysoft.web.controller;import javax.servlet.http.HttpServletRequest;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Value;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import com.cmcc.zysoft.sysmanage.common.BaseController;import com.cmcc.zysoft.web.util.DocConverter;/** * * @ClassName: DocConverterController* @Description: TODO文档转换跳转类* @author cmzcheng@gmail.com* @date 2014年6月28日 下午6:37:04* */@RequestMapping("pc/docConverterController")@Controllerpublic class DocConverterController extends BaseController { @Value("${upload.file.path}") private static String path; private static Logger _logger = LoggerFactory .getLogger(DocConverterController.class); @RequestMapping("/docPrvew.htm") public String docUplod(HttpServletRequest request,String fileName) { String fileString =request.getServletContext().getRealPath("")+path+fileName; //String fileString = request.getServletContext().getRealPath("")+"/resources/downLoad/11.doc"; //暂时路径是写死进行测试的,等后面上传后从上传路径进行查找 DocConverter d = new DocConverter(fileString); d.conver(); // 调用getswfPath()方法,打印转换后的swf文件路径 _logger.info(d.getswfPath()); // 生成swf相对路径,以便传递给flexpaper播放器 String swfpath ="/resources/downLoad" + d.getswfPath().substring(d.getswfPath().lastIndexOf("/")); _logger.info(swfpath); request.getSession().setAttribute("swfpath", swfpath); //model.addAttribute("swfpath", swfpath); return "flexPaper/documentView"; }}
在这个controller中我们可以看到调用了DocConverter 这个类,这个类主要是对pdf进行转换的类,所以比较重要也是成功与否的关键
在前面我们知道OpenOffice需要用命令行启动服务,但是上线后不能使用cmd来进行操作吧,所以在DocConverter,在网上找了JavaCallOpenoffice利用程序进行自启动
package com.cmcc.zysoft.web.util;import java.io.BufferedInputStream;import java.io.File;import java.io.FileWriter;import java.io.IOException;import java.io.InputStream;import java.util.Scanner;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import com.artofsolving.jodconverter.DocumentConverter;import com.artofsolving.jodconverter.openoffice.connection.OpenOfficeConnection;import com.artofsolving.jodconverter.openoffice.connection.SocketOpenOfficeConnection;import com.artofsolving.jodconverter.openoffice.converter.OpenOfficeDocumentConverter;/** * * @ClassName: DocConverter * @Description: TODO felx生成方法 * @author cmzcheng@gmail.com * @date 2014年6月28日 下午6:37:27 * */public class DocConverter { private static final int environment = 1;// 环境 1:windows 2:linux private String fileString;// (只涉及pdf2swf路径问题) private String outputPath = "";// 输入路径 ,如果不设置就输出在默认的位置 private String fileName; private File pdfFile; private File swfFile; private File docFile; private Process process = null; private static Logger _logger = LoggerFactory.getLogger(DocConverter.class); public DocConverter(String fileString) { ini(fileString); JavaCallOpenoffice();// 启动openoffice } /** * 重新设置file * * @param fileString */ public void setFile(String fileString) { ini(fileString); } /** * 初始化 * * @param fileString */ private void ini(String fileString) { this.fileString = fileString; fileName = fileString.substring(0, fileString.lastIndexOf(".")); docFile = new File(fileString); pdfFile = new File(fileName + ".pdf"); swfFile = new File(fileName + ".swf"); } /** * 转为PDF * * @param file */ private void doc2pdf() throws Exception { if (docFile.exists()) { if (!pdfFile.exists()) { OpenOfficeConnection connection = new SocketOpenOfficeConnection( 8100); try { connection.connect(); DocumentConverter converter = new OpenOfficeDocumentConverter( connection); converter.convert(docFile, pdfFile); // close the connection connection.disconnect(); _logger.info("****pdf转换成功,PDF输出:" + pdfFile.getPath() + "****"); } catch (java.net.ConnectException e) { e.printStackTrace(); _logger.info("****swf转换器异常,openoffice服务未启动!****"); throw e; } catch (com.artofsolving.jodconverter.openoffice.connection.OpenOfficeException e) { e.printStackTrace(); _logger.info("****swf转换器异常,读取转换文件失败****"); throw e; } catch (Exception e) { e.printStackTrace(); throw e; } } else { _logger.info("****已经转换为pdf,不需要再进行转化****"); } } else { _logger.info("****swf转换器异常,需要转换的文档不存在,无法转换****"); } DistorySoffice();// 每次转换成功后都关闭下openoffice } /** * 自启动openoffice方法 */ public void JavaCallOpenoffice() { Runtime rn = Runtime.getRuntime(); Process p = null; try { File file = new File("d:\\openoprenoffice.bat"); if (false == file.exists()) { _logger.info("。。。。。。。。。。"); FileWriter writer = new FileWriter("d:\\openoprenoffice.bat "); writer.write("@echo off "); writer.write("\r\n "); writer.write("D:"); writer.write("\r\n "); // D:\\Program Files\\OpenOffice 4\\program: openoffice的安装路径路径 writer.write("cd D:\\Program Files (x86)\\OpenOffice 4\\program"); writer.write("\r\n "); writer.write("soffice -headless -accept=" + "socket,host=127.0.0.1,port=8100;urp;" + " -nofirststartwizard"); writer.write("\r\n "); writer.write("@echo on "); writer.close(); } p = rn.exec("cmd.exe /C d:\\openoprenoffice.bat"); } catch (Exception e1) { e1.printStackTrace(); } } /** * 关闭office的方法 */ public void DistorySoffice() { try { // 显示进程 process = Runtime.getRuntime().exec("tasklist"); Scanner in = new Scanner(process.getInputStream()); while (in.hasNextLine()) { String processString = in.nextLine(); if (processString.contains("soffice.exe")) { // 关闭soffice进程的命令 String cmd = "taskkill /f /im soffice.exe"; process = Runtime.getRuntime().exec(cmd); _logger.info("openoffice正常关闭......."); } } } catch (IOException e) { e.printStackTrace(); } } /** * 转换成 swf */ @SuppressWarnings("unused") private void pdf2swf() throws Exception { Runtime r = Runtime.getRuntime(); if (!swfFile.exists()) { if (pdfFile.exists()) { if (environment == 1) {// windows环境处理 try { Process p = r .exec("C:/Program Files (x86)/SWFTools/pdf2swf.exe " + pdfFile.getPath() + " -o " + swfFile.getPath() + " -T 9"); _logger.info(loadStream(p.getInputStream())); _logger.info(loadStream(p.getErrorStream())); _logger.info(loadStream(p.getInputStream())); _logger.info("****swf转换成功,文件输出:" + swfFile.getPath() + "****"); if (pdfFile.exists()) { pdfFile.delete(); } } catch (IOException e) { e.printStackTrace(); throw e; } } else if (environment == 2) {// linux环境处理 try { Process p = r.exec("pdf2swf " + pdfFile.getPath() + " -o " + swfFile.getPath() + " -T 9"); _logger.info(loadStream(p.getInputStream())); _logger.info(loadStream(p.getErrorStream())); _logger.info("****swf转换成功,文件输出:" + swfFile.getPath() + "****"); if (pdfFile.exists()) { pdfFile.delete(); } } catch (Exception e) { e.printStackTrace(); throw e; } } } else { _logger.info("****pdf不存在,无法转换****"); } } else { _logger.info("****swf已经存在不需要转换****"); } } static String loadStream(InputStream in) throws IOException { int ptr = 0; in = new BufferedInputStream(in); StringBuffer buffer = new StringBuffer(); while ((ptr = in.read()) != -1) { buffer.append((char) ptr); } return buffer.toString(); } /** * 转换主方法 */ @SuppressWarnings("unused") public boolean conver() { if (swfFile.exists()) { _logger.info("****swf转换器开始工作,该文件已经转换为swf****"); return true; } if (environment == 1) { _logger.info("****swf转换器开始工作,当前设置运行环境windows****"); } else { _logger.info("****swf转换器开始工作,当前设置运行环境linux****"); } try { doc2pdf(); pdf2swf(); } catch (Exception e) { e.printStackTrace(); return false; } if (swfFile.exists()) { return true; } else { return false; } } /** * 返回文件路径 * * @param s */ public String getswfPath() { if (swfFile.exists()) { String tempString = swfFile.getPath(); tempString = tempString.replaceAll("\\\\", "/"); return tempString; } else { return ""; } } /** * 设置输出路径 */ public void setOutputPath(String outputPath) { this.outputPath = outputPath; if (!outputPath.equals("")) { String realName = fileName.substring(fileName.lastIndexOf("/"), fileName.lastIndexOf(".")); if (outputPath.charAt(outputPath.length()) == ‘/‘) { swfFile = new File(outputPath + realName + ".swf"); } else { swfFile = new File(outputPath + realName + ".swf"); } } }}
后端写好后,那么我们来写前端,前端只有一个预览界面documentView.jsp,对应的几个flexPaper js文件是在下载的flexpaper包中直接copy过来的
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <%@ include file="/WEB-INF/views/common/homecommoncss.jsp"%> <base href="<%=basePath%>" /> <% String swfFilePath=basePath+session.getAttribute("swfpath").toString(); %> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <jsp:include page="/WEB-INF/views/common/commonjs.jsp" /><script type="text/javascript" src="/resources/js/flexPaper/flexpaper_handlers_debug.js"></script> <script type="text/javascript" src="/resources/js/flexPaper/flexpaper_handlers.js"></script> <script type="text/javascript" src="/resources/js/flexPaper/flexpaper.js"></script> <style type="text/css" media="screen"> html, body { height:100%; } body { margin:0; padding:0; overflow:auto; } #flashContent { display:none; } </style> <title>文档在线预览系统</title> </head> <body> <div style="position:absolute;left:50px;top:10px;"> <div id="documentViewer" class="flexpaper_viewer" style="width:870px;height:500px"></div> <script type="text/javascript"> $(‘#documentViewer‘).FlexPaperViewer( { config : { SWFFile : ‘<%=swfFilePath%>‘, Scale : 0.6, ZoomTransition : ‘easeOut‘, ZoomTime : 0.5, ZoomInterval : 0.2, FitPageOnLoad : true, FitWidthOnLoad : false, FullScreenAsMaxWindow : false, ProgressiveLoading : false, MinZoomSize : 0.2, MaxZoomSize : 5, SearchMatchAll : false, InitViewMode : ‘Portrait‘, RenderingOrder : ‘flash‘, StartAtPage : ‘‘, ViewModeToolsVisible : true, ZoomToolsVisible : true, NavToolsVisible : true, CursorToolsVisible : true, SearchToolsVisible : true, WMode : ‘window‘, localeChain: ‘en_US‘ }} ); </script> </div> </body> </html>
其它:在操作过程由于我这个框架是采用了springSecurity 进行签权,所以我们在启动后出现了FlexPaperViewer.swf被拦截无法加载的错误,之后修改了file-security.xml中进行了一个不拦截的设置
代码如下
<security:filter-chain pattern="/security/**" filters="none" /><security:filter-chain pattern="/**/*.swf" filters="none" />
最后我这边改造了下flexpaper.js文件的默认路径,改造后的代码如下,其中_jsDirectory 以及expressInstall 所指发路径为本人代码所在的flexpaper文件夹中的相关文件
if (_uDoc != null) { _SWFFile = FLEXPAPER.translateUrlByFormat(_uDoc,"swf"); } _SWFFile = (config.SwfFile!=null?config.SwfFile:_SWFFile); _SWFFile = (config.SWFFile!=null?config.SWFFile:_SWFFile); _PDFFile = (config.PDFFile!=null?config.PDFFile:_PDFFile); _IMGFiles = (config.IMGFiles!=null?config.IMGFiles:_IMGFiles); _IMGFiles = (config.PageImagePattern!=null?config.PageImagePattern:_IMGFiles); _JSONFile = (config.JSONFile!=null?config.JSONFile:_JSONFile); _jsDirectory = (config.jsDirectory!=null?config.jsDirectory:"resources/js/flexPaper/"); _cssDirectory = (config.cssDirectory!=null?config.cssDirectory:"css/"); _localeDirectory = (config.localeDirectory!=null?config.localeDirectory:"locale/"); if(_SWFFile!=null && _SWFFile.indexOf("{" )==0 && _SWFFile.indexOf("[*," ) > 0 && _SWFFile.indexOf("]" ) > 0){_SWFFile = escape(_SWFFile);} // split file fix window[instance] = flashembed(id, { src : _jsDirectory+"FlexPaperViewer.swf", version : [10, 0], expressInstall : _jsDirectory+"expressinstall.swf", wmode : _WMode },{
最后我们来看下效果怎样
ok,不足之处,希望多喷!