前段時間領導交代了一個需求：客戶需要一個能夠web在線編輯文字，如同編輯word文檔一樣，同時能夠將編輯完成的內容導出為word文檔並下載到本地。
我們選擇了前台使用富文本插件的形式用於編輯內容，使用的是UEditor（官網：http://ueditor.baidu.com/website/），該插件類似於用於博客園的文章編寫前台功能功能，使用了該插件的源碼的jsp版本（下載地址：http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp）。
實例化編輯器，並將后台傳遞的word內容數據（html形式）展現在編輯區域內。
var ue = UE.getEditor('editor',{ toolbars: [ ['undo', 'redo', 'bold','italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|' , 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'directionalityltr', 'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'simpleupload', 'insertimage','link', 'unlink', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize','|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', ,'horizontal', 'date', 'time', 'spechars', '|', 'preview', 'searchreplace','print'] ], }); ue.ready(function () { //content是html標簽的內容，附帶有css樣式 ue.setContent(content,true) });
以上是前台的簡單實現，這個插件甚至能夠直接粘貼圖片！
后台的實現思路是：由於前台允許在線編輯，所有不能直接在后台生成一個報告文檔，需要將前台顯示的內容完全傳至后台，有后台代碼將前台的html界面轉換成word文檔。
我在項目中有兩種后台實現方式，本篇先介紹前一種實現方式，另一種方式將於下一篇介紹。
這種方式生成的是doc后綴的文檔，是Word2003以前規范的word文檔。
@RequestMapping("/defectV2/defect/analysis/tranformHtmlToWord")
@ResponseBody
public MessageBean tranformHtmlToWordDocx(@RequestParam Map params,HttpServletRequest request, HttpServletResponse response) {
try {
//params包含前台傳回的html內容
// analysisService.tranformHtmlToWordDoc(params,response);
String content = "<html><head></head><body>" + (String) params.get("editorValue") + "</body></html>";
InputStream is = new ByteArrayInputStream(content.getBytes());//utf-8
// OutputStream os = new FileOutputStream("F:/analysis/test.doc");
OutputStream os = response.getOutputStream();
response.setContentType("application/vnd.ms-excel");
response.setHeader("Content-disposition", "attachment;filename=" + URLEncoder.encode("問題統計分析.doc","utf-8"));
POIFSFileSystem fs = new POIFSFileSystem();
fs.createDocument(is, "WordDocument");
fs.writeFilesystem(os);
os.close();
is.close();
fs.close();
return new MessageBean("success", "生成報告成功！", null);
} catch (Exception e) {
e.printStackTrace();
utils.WriteSystemLog(sls, "ERROR", "生成報告", "生成報告失敗！" + e.getCause());
return new MessageBean("error", "生成報告失敗！", null);
}
}
這種方式直接使用的POI附帶的功能，在pom.xml需要引入POI的相關依賴。
<dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.14</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>3.14</version> </dependency>