文檔線上預覽：Java+FlexPaper+swfTools仿百度文庫的設計與實作

筆者最近在給客戶開發文檔管理系統時，客戶要求上傳到管理系統的文檔(包括ppt，word，excel，txt)隻能預覽不允許下載下傳。筆者想到了百度文庫和豆丁網，百度文庫和豆丁網的線上預覽都是利用flash來播放文檔的，在網上查閱了大量資料，終于實作了該項功能，現将自己的設計和實作整理如下。

一、如何将文檔轉成flash支援的swf檔案實作線上播放？

1.先用openOffice把ppt、word、excel、txt類型的文檔轉換成pdf

2.用swftools将pdf轉換成swf，然後利用FlexPaper插件實作線上播放預覽。

二、具體實作

1.安裝必備工具元件

(1)安裝openoffice,openoffice是開源免費的文字處理軟體，它可以将office文檔轉成pdf檔案（筆者安裝到D:\Program Files),openOffice下載下傳位址 http://www.openoffice.org/download/index.html

(2)安裝完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

文檔線上預覽：Java+FlexPaper+swfTools仿百度文庫的設計與實作

進入windows任務管理器檢視有個程序soffice.bin,說明openoffice啟動成功！

文檔線上預覽：Java+FlexPaper+swfTools仿百度文庫的設計與實作

(3)安裝swfTools（安裝到 D:\Program Files）swftools作用是将pdf轉換為swf檔案以便flexpaper播放。下載下傳位址： http://www.swftools.org/download.html

(4)下載下傳flexpaper，下載下傳位址： http://flexpaper.devaldi.com/download/

筆者下載下傳的是FlexPaper_1.5.1，下載下傳後将其解壓備用。

(5)下載下傳OpenDocument文檔轉換器 JODConverter，JODConverter是一個java的OpenDucument檔案轉換器，可以進行許多檔案格式的轉換，它利用OpenOffice來進行轉換工作，它能進行以下的轉換工作：

a.Microsoft Office格式轉換為OpenDucument，以及OpenDucument轉換為Microsoft Office

b.OpenDucument轉換為PDF，Word、Excel、PowerPoint轉換為PDF，RTF轉換為PDF等。

下載下傳位址： http://sourceforge.net/projects/jodconverter/files/

我們後面開發主要用它的jodconverter-2.2.2.jar包

2.軟體開發過程

(1)啟動Eclipse，建立web項目名稱為ctcesims

(2)将上面第4步解壓的flexpaper檔案中的js檔案夾(包含了flexpaper_flash_debug.js，flexpaper_flash.js,jquery.js,這三個js檔案主要是預覽swf檔案的插件)拷貝至網站根目錄;将FlexPaperViewer.swf拷貝至網站根目錄下(該檔案主要是用在網頁中播放swf檔案的播放器)，目錄結構如下圖

文檔線上預覽：Java+FlexPaper+swfTools仿百度文庫的設計與實作

(3)建立documentUpload.jsp檔案

[html] view plain 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文檔線上預覽系統</title>
<style>
body {margin-top:100px;background:#fff;font-family: Verdana, Tahoma;}
a {color:#CE4614;}
#msg-box {color: #CE4614; font-size:0.9em;text-align:center;}
#msg-box .logo {border-bottom:5px solid #ECE5D9;margin-bottom:20px;padding-bottom:10px;}
#msg-box .title {font-size:1.4em;font-weight:bold;margin:0 0 30px 0;}
#msg-box .nav {margin-top:20px;}
</style>
</head>
<body>
<div id="msg-box">
<form name="form1" method="post" enctype="multipart/form-data" action="docUploadConvertAction.jsp">
<div class="title">
請上傳要處理的檔案，過程可能需要幾分鐘，請稍候片刻。
</div>
<p>
<input name="file1" type="file">
</p>
<p>
<input type="submit" name="Submit" value="上傳">
</p>
</form >
</div>
</body>
</html>

(4)建立文檔轉換類DocConverter.java

[java] view plain copy

package com.cectsims.util;
import java.io.BufferedInputStream;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
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;
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;
public DocConverter(String fileString) {
ini(fileString);
}
public void setFile(String fileString) {
ini(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");
}
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();
System.out.println("****pdf轉換成功，PDF輸出：" + pdfFile.getPath()+ "****");
} catch (java.net.ConnectException e) {
e.printStackTrace();
System.out.println("****swf轉換器異常，openoffice服務未啟動！****");
throw e;
} catch (com.artofsolving.jodconverter.openoffice.connection.OpenOfficeException e) {
e.printStackTrace();
System.out.println("****swf轉換器異常，讀取轉換檔案失敗****");
throw e;
} catch (Exception e) {
e.printStackTrace();
throw e;
}
} else {
System.out.println("****已經轉換為pdf，不需要再進行轉化****");
}
} else {
System.out.println("****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("D:/Program Files/SWFTools/pdf2swf.exe "+ pdfFile.getPath() + " -o "+ swfFile.getPath() + " -T 9");
System.out.print(loadStream(p.getInputStream()));
System.err.print(loadStream(p.getErrorStream()));
System.out.print(loadStream(p.getInputStream()));
System.err.println("****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");
System.out.print(loadStream(p.getInputStream()));
System.err.print(loadStream(p.getErrorStream()));
System.err.println("****swf轉換成功，檔案輸出："
+ swfFile.getPath() + "****");
if (pdfFile.exists()) {
pdfFile.delete();
}
} catch (Exception e) {
e.printStackTrace();
throw e;
}
}
} else {
System.out.println("****pdf不存在,無法轉換****");
}
} else {
System.out.println("****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()) {
System.out.println("****swf轉換器開始工作，該檔案已經轉換為swf****");
return true;
}
if (environment == 1) {
System.out.println("****swf轉換器開始工作，目前設定運作環境windows****");
} else {
System.out.println("****swf轉換器開始工作，目前設定運作環境linux****");
}
try {
doc2pdf();
pdf2swf();
} catch (Exception e) {
e.printStackTrace();
return false;
}
if (swfFile.exists()) {
return true;
} else {
return false;
}
}
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");
}
}
}
}

(5)建立文檔上傳轉換處理檔案docUploadConvertAction.jsp檔案

[html] view plain copy

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.io.*"%>
<%@page import="java.util.Enumeration"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.cectsims.util.DocConverter"%>
<%
//檔案上傳采用cos元件上傳，可更換為commons-fileupload上傳，檔案上傳後，儲存在upload檔案夾
//擷取檔案上傳路徑
String saveDirectory =application.getRealPath("/")+"upload";
//列印上傳路徑資訊
System.out.println(saveDirectory);
//每個檔案最大50m
int maxPostSize = 50 * 1024 * 1024 ;
//采用cos預設的命名政策，重名後加1,2,3...如果不加dfp重名将覆寫
DefaultFileRenamePolicy dfp = new DefaultFileRenamePolicy();
//response的編碼為"UTF-8",同時采用預設的檔案名沖突解決政策,實作上傳,如果不加dfp重名将覆寫
MultipartRequest multi = new MultipartRequest(request, saveDirectory, maxPostSize,"UTF-8",dfp);
//MultipartRequest multi = new MultipartRequest(request, saveDirectory, maxPostSize,"UTF-8");
//輸出回報資訊
Enumeration files = multi.getFileNames();
while (files.hasMoreElements()) {
System.err.println("ccc");
String name = (String)files.nextElement();
File f = multi.getFile(name);
if(f!=null){
String fileName = multi.getFilesystemName(name);
//擷取上傳檔案的擴充名
String extName=fileName.substring(fileName.lastIndexOf(".")+1);
//檔案全路徑
String lastFileName= saveDirectory+"\\" + fileName;
//擷取需要轉換的檔案名,将路徑名中的'\'替換為'/'
String converfilename = saveDirectory.replaceAll("\\\\", "/")+"/"+fileName;
System.out.println(converfilename);
//調用轉換類DocConverter,并将需要轉換的檔案傳遞給該類的構造方法
DocConverter d = new DocConverter(converfilename);
//調用conver方法開始轉換，先執行doc2pdf()将office檔案轉換為pdf;再執行pdf2swf()将pdf轉換為swf;
d.conver();
//調用getswfPath()方法，列印轉換後的swf檔案路徑
System.out.println(d.getswfPath());
//生成swf相對路徑，以便傳遞給flexpaper播放器
String swfpath = "upload"+d.getswfPath().substring(d.getswfPath().lastIndexOf("/"));
System.out.println(swfpath);
//将相對路徑放入sessio中儲存
session.setAttribute("swfpath", swfpath);
out.println("上傳的檔案:"+lastFileName);
out.println("檔案類型"+extName);
out.println("<hr>");
}
}
%>
<!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>Insert title here</title>
<style>
body {margin-top:100px;background:#fff;font-family: Verdana, Tahoma;}
a {color:#CE4614;}
#msg-box {color: #CE4614; font-size:0.9em;text-align:center;}
#msg-box .logo {border-bottom:5px solid #ECE5D9;margin-bottom:20px;padding-bottom:10px;}
#msg-box .title {font-size:1.4em;font-weight:bold;margin:0 0 30px 0;}
#msg-box .nav {margin-top:20px;}
</style>
</head>
<body>
<div>
<form name="viewForm" id="form_swf" action="documnetView.jsp" method="POST">
<input type='submit' value='預覽' class='BUTTON SUBMIT'/>
</form>
</div>
</body>
</html>

(6)建立文檔預覽檔案documentView.jsp

[html] view plain copy

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String swfFilePath=session.getAttribute("swfpath").toString();
%>
<!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">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/flexpaper_flash.js"></script>
<script type="text/javascript" src="js/flexpaper_flash_debug.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;">
<a id="viewerPlaceHolder" style="width:820px;height:650px;display:block"></a>
<script type="text/javascript">
var fp = new FlexPaperViewer(
'FlexPaperViewer',
'viewerPlaceHolder', { config : {
SwfFile : escape('<%=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 : 'SinglePage',
ViewModeToolsVisible : true,
ZoomToolsVisible : true,
NavToolsVisible : true,
CursorToolsVisible : true,
SearchToolsVisible : true,
localeChain: 'en_US'
}});
</script>
</div>
</body>
</html>

7.啟動tomcat，部署目前web應用

8.位址欄輸入http://localhost:8080/ctcesims/documentUpload.jsp 如下圖：

文檔線上預覽：Java+FlexPaper+swfTools仿百度文庫的設計與實作

單擊選擇檔案，選擇您要上傳的文檔，筆者選擇的是lunwen.doc檔案，然後單擊上傳，處理完成後，列印如下資訊，如下圖所示：

文檔線上預覽：Java+FlexPaper+swfTools仿百度文庫的設計與實作

單擊預覽按鈕，就會生成預覽界面，如下圖：

文檔線上預覽：Java+FlexPaper+swfTools仿百度文庫的設計與實作

9.若出現swf無法預覽，請通路

http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html#119065将生成swf的檔案夾設定為信任檔案位置。

由于時間倉促，以上隻是簡單示例，很多情況還需要進一步考慮！

參考資料：

http://blog.csdn.net/iamduoluo/article/details/6727031

http://www.cnblogs.com/star-studio/archive/2011/12/09/2282411.html#2497889

文檔線上預覽：Java+FlexPaper+swfTools仿百度文庫的設計與實作

繼續閱讀

【釋出】App Store 預覽視訊制作總結知乎專欄：AppStore預覽視訊制作心得

Linux下分卷壓縮較大的檔案

軟體測試作業2

解決pyinstaller打包exe出現selenium geckodriver黑視窗問題

為什麼運放輸入端串聯一個隔直電容後輸出沒有波形？------關于隔直電路的簡要了解前言一、常見的錯誤隔直電路二、正确的隔直電路

聯想拯救者Y7000p拆機換壓條(軸蓋)

麥博FC330低音炮拆機圖（簡易版）

xml解析失敗Invalid byte 1 of 1-byte UTF-8 sequence

2020年終總結和展望前言一、2020年終總結二、2021年展望

一場春雨，一個帶着泥土芬芳的記憶

在DOS下運作不了ipconfig指令

開博一周年

MathType

【可靠性評估】電力系統可靠性評估matlab仿真1.軟體版本2.本算法理論知識

在linux下安裝GSL庫以及在codeblocks上配置GSL庫一在 linux 上安裝 GSL 二在codeblocks 上按如下方式配置 GSL庫：三測試程式

swmm與lisflood-fp源碼如何一起編譯 CMake指令