前言：
导出word的需求其实在日常工作中用到的地方还不少，于是想写一篇文章好好记录一下，在导出之前，需要了解一下关于浏览器如何处理servlet的后台数据。具体可以了解一下http通信下载行为在servlet的实现。
==导出的工具类代码来源于网络，如有侵权可以联系我删除文章==
个人使用==ftl==作为word导出模板引擎，有很多模板引擎可以选，个人经过查阅资料发现ftl用的比较多，所以选择这一种
码云地址：
文章牵扯代码比较多，如果要看具操作可以查看我自己瞎弄的一个码云地址：
效果演示：
给了一个测试页面，临时写了一些脚本，可以作为参考（后续会贴Html代码进去）
网络异常，图片无法展示
|
点击提交,导出内容, 导出word报告
网络异常，图片无法展示
|
导出之后，打开word内容为：
网络异常，图片无法展示
|
实现步骤 - 制作word模板
第一步 新建word，制作成果样板
将需要导出word的内容，先粘贴到一个新建的word文件里面
网络异常，图片无法展示
|
第二步 转存格式 -> xml
选择文件“另存为”，将格式设置为xml格式
网络异常，图片无法展示
|
第三步 格式化文件
将文件放到idea或者支持格式化的软件里面，进行格式化，保存:
注意占位符要匹配
网络异常，图片无法展示
|
第四步：模板数据替换占位符
在word页面将需要导入数据的地方，替换占位符
需要注意内容处理的时候: ${ filename｝ 有可能被切割为多个部分，我们需要把多个切割部分，改为下面的样式
网络异常，图片无法展示
|
一定记得所有的改动之后，马上打开xml格式的word，确认是不是改崩了
上面的步骤完成，说明有一个word模板做好了
第五步：制作ftl文件，word模板成型
在项目里面新建一个ftl文件，同时需要在工具类中配置，同时把做好站位符操作的xml内容贴进去
代码实现 - 导出代码
- 工具类的配置如下:
WordGeneratorUtil.java：
/** * 模板常量类配置 */ public static final class FreemarkerTemplate { public static final String REPORT = "report"; public static final String REC_RECOMMEND = "recRecommend"; // 增加你的模板文件名称: } 复制代码
在静态的代码块里面，需要注入对应的模板配置
// 注意初始化要载入对应模板 allTemplates.put(FreemarkerTemplate.REPORT, configuration.getTemplate(FreemarkerTemplate.REPORT + ".ftl")); allTemplates.put(FreemarkerTemplate.REC_RECOMMEND,configuration.getTemplate(FreemarkerTemplate.REC_RECOMMEND + ".ftl")); 复制代码
- 在配置完成之后，导出的时候就可以找到对应的文件了
- 建立一个通用的导出方法:
/** * 创建doc 文档 * dataMap 数据，需要对应模板的占位符，否则会出错 * @param dataMap 数据 * @param wordName word 报表的名称 * @param freemarkerTemplateName 指定需要使用哪个freemarker模板 * @return */ public static File createDoc(String freemarkerTemplateName, String wordName, Map<String, String> dataMap) { try { File f = new File(wordName); Template t = allTemplates.get(freemarkerTemplateName); // 这个地方不能使用FileWriter因为需要指定编码类型否则生成的Word文档会因为有无法识别的编码而无法打开 Writer w = new OutputStreamWriter(new FileOutputStream(f), StandardCharsets.UTF_8); t.process(dataMap, w); w.close(); return f; } catch (Exception ex) { ex.printStackTrace(); throw new RuntimeException("生成word文档失败"); } } 复制代码
工具类完整代码：
package com.zxd.interview.export; import freemarker.template.Configuration; import freemarker.template.Template; import org.springframework.util.CollectionUtils; import java.io.*; import java.nio.charset.StandardCharsets; import java.util.HashMap; import java.util.Map; /** * <p> * 从网络上根据资料找到的一个工具类 * 主要以freemarker 为核心的模板生成word文档的工具类 * 这里默认配置了固定路径 * 需要根据路径取到对应模板 * 请求参数需要设置对应的模板名称 * @author * @className: WordGeneratorUtils * @description: 文档生成工具类 * </p> * version: V1.0.0 */ public final class WordGeneratorUtil { private static Configuration configuration = null; private static Map<String, Template> allTemplates = null; private static final String TEMPLATE_URL = "/templates"; /** * 模板常量类配置 */ public static final class FreemarkerTemplate { public static final String Test = "test"; public static final String REPORT = "report"; public static final String REC_RECOMMEND = "recRecommend"; } static { configuration = new Configuration(Configuration.VERSION_2_3_28); configuration.setDefaultEncoding("utf-8"); configuration.setClassForTemplateLoading(WordGeneratorUtil.class, TEMPLATE_URL); allTemplates = new HashMap(4); try { // 注意初始化要载入对应模板 allTemplates.put(FreemarkerTemplate.Test, configuration.getTemplate(FreemarkerTemplate.Test + ".ftl")); allTemplates.put(FreemarkerTemplate.REPORT, configuration.getTemplate(FreemarkerTemplate.REPORT + ".ftl")); allTemplates.put(FreemarkerTemplate.REC_RECOMMEND, configuration.getTemplate(FreemarkerTemplate.REC_RECOMMEND + ".ftl")); } catch (IOException e) { e.printStackTrace(); throw new RuntimeException(e); } } private WordGeneratorUtil() { throw new AssertionError(); } /** * 创建doc 文档 * dataMap 数据，需要对应模板的占位符，否则会出错 * @param dataMap 数据 * @param wordName word 报表的名称 * @param freemarkerTemplateName 指定需要使用哪个freemarker模板 * @return */ public static File createDoc(String freemarkerTemplateName, String wordName, Map<String, String> dataMap) { try { File f = new File(wordName); Template t = allTemplates.get(freemarkerTemplateName); // 这个地方不能使用FileWriter因为需要指定编码类型否则生成的Word文档会因为有无法识别的编码而无法打开 Writer w = new OutputStreamWriter(new FileOutputStream(f), StandardCharsets.UTF_8); t.process(dataMap, w); w.close(); return f; } catch (Exception ex) { ex.printStackTrace(); throw new RuntimeException("生成word文档失败"); } } } 复制代码
调用层：
- 在业务层，将需要导出的数据，根据占位符的i信息进行赋值，注意不能漏，否则导出之后的文件会打不开
@Override public File exportQualityStep4Word(WordReportDTO exportWordRequest) { Map<String, String> datas = new HashMap(QualityConstants.HASH_MAP_INIT_VALUE); //主标题 datas.put("schoolName", exportWordRequest.getSchoolName()); datas.put("title1", exportWordRequest.getBaseSituation()); datas.put("title2", exportWordRequest.getLearningEnvRec()); datas.put("title3", exportWordRequest.getLearningEnvPro()); datas.put("title4", exportWordRequest.getDayLifeRec()); datas.put("title5", exportWordRequest.getDayLifePro()); datas.put("title6", exportWordRequest.getLearningActivityRec()); datas.put("title7", exportWordRequest.getLearningActivityPro()); datas.put("title8", exportWordRequest.getDevRecommend()); datas.put("base64_1", exportWordRequest.getBase64_1()); datas.put("base64_2", exportWordRequest.getBase64_2()); datas.put("base64_3", exportWordRequest.getBase64_3()); datas.put("base64_4", exportWordRequest.getBase64_4()); datas.put("base64_5", exportWordRequest.getBase64_5()); datas.put("base64_6", exportWordRequest.getBase64_6()); //导出 return WordGeneratorUtil.createDoc(WordGeneratorUtil.FreemarkerTemplate.REPORT, exportWordRequest.getWordName(), datas); } 复制代码
- 下面是生成报表导出的基本操作，可以在用到的地方复制过去改动即可
/** * 生成报告的导出报表操作 * * @param request request * @param response 响应数据 * @param exportWordRequest 导出dto */ @PostMapping("/quality/exportword") @ResponseBody public void povertyExportWord(HttpServletRequest request, HttpServletResponse response, WordReportDTO exportWordRequest) { File file = qualityReportService.exportQualityStep4Word(exportWordRequest); InputStream fin = null; OutputStream out = null; try { // 调用工具类WordGeneratorUtils的createDoc方法生成Word文档 fin = new FileInputStream(file); response.setCharacterEncoding(QualityConstants.UTF_8); response.setContentType(QualityConstants.CONTENT_TYPE_WORD); // 设置浏览器以下载的方式处理该文件 // 设置文件名编码解决文件名乱码问题 //获得请求头中的User-Agent String filename = exportWordRequest.getWordName(); String agent = request.getHeader(QualityConstants.USER_AGENT); String filenameEncoder = ""; // 根据不同的浏览器进行不同的判断 if (agent.contains(QualityConstants.MSIE)) { // IE浏览器 filenameEncoder = URLEncoder.encode(filename, QualityConstants.UTF_8); filenameEncoder = filenameEncoder.replace("+", " "); } else if (agent.contains(QualityConstants.FIREFOX)) { // 火狐浏览器 BASE64Encoder base64Encoder = new BASE64Encoder(); filenameEncoder = "=?utf-8?B?" + base64Encoder.encode(filename.getBytes(QualityConstants.UTF_8)) + "?="; } else { // 其它浏览器 filenameEncoder = URLEncoder.encode(filename, QualityConstants.UTF_8); } response.setHeader(QualityConstants.ACCESS_CONTROL_ALLOW_ORIGIN, "*");//所有域都可以跨 response.setHeader(QualityConstants.CONTENT_TYPE, QualityConstants.CONTENT_TYPE_STEAM);//二进制 流文件 response.setHeader(QualityConstants.CONTENT_DISPOSITION, "attachment;filename=" + filenameEncoder + ".doc");//下载及其文件名 response.setHeader(QualityConstants.CONNECTION, QualityConstants.CLOSE);//关闭请求头连接 //设置文件在浏览器打开还是下载 response.setContentType(QualityConstants.CONTENT_TYPE_DOWNLOAD); out = response.getOutputStream(); byte[] buffer = new byte[QualityConstants.BYTE_512]; int bytesToRead = QualityConstants.NUM_MINUS_1; // 通过循环将读入的Word文件的内容输出到浏览器中 while ((bytesToRead = fin.read(buffer)) != QualityConstants.NUM_MINUS_1) { out.write(buffer, QualityConstants.NUM_ZERO, bytesToRead); } } catch (Exception e) { throw new RuntimeException(QualityConstants.FARIURE_EXPORT, e); } finally { try { if (fin != null) { fin.close(); } if (out != null) { out.close(); } if (file != null) { file.delete(); } } catch (IOException e) { throw new RuntimeException(QualityConstants.FARIURE_EXPORT, e); } } } 复制代码
导出实体dto
下面写了一个导出的实体dto，实体对象可以自己定制：
package com.zxd.interview.dto; /** * 测试使用的dto，用于封装导出word的对象 * * @author zhaoxudong * @version 1.0 * @date 2020/11/7 23:37 */ public class TestReportDTO { /** * 测试 */ private String test0; /** * 测试 */ private String test1; /** * 测试 */ private String test2; /** * 测试 */ private String test4; /** * 测试 */ private String test5; /** * 测试 */ private String test6; /** * 报告名称 */ private String wordName; public String getTest0() { return test0; } public void setTest0(String test0) { this.test0 = test0; } public String getTest1() { return test1; } public void setTest1(String test1) { this.test1 = test1; } public String getTest2() { return test2; } public void setTest2(String test2) { this.test2 = test2; } public String getTest4() { return test4; } public void setTest4(String test4) { this.test4 = test4; } public String getTest5() { return test5; } public void setTest5(String test5) { this.test5 = test5; } public String getTest6() { return test6; } public void setTest6(String test6) { this.test6 = test6; } public String getWordName() { return wordName; } public void setWordName(String wordName) { this.wordName = wordName; } @Override public String toString() { return "TestReportDTO{" + "test0='" + test0 + '\'' + ", test1='" + test1 + '\'' + ", test2='" + test2 + '\'' + ", test4='" + test4 + '\'' + ", test5='" + test5 + '\'' + ", test6='" + test6 + '\'' + '}'; } } 复制代码
常量配置模块:
个人很不喜欢硬编码这东西，又丑又难看，所以很多东西会用不可变对象替代.
package com.zxd.interview.constant; /** * 常量配置类 * * @author zhouhui */ public class QualityConstants { /** * 质量检测 的督导事项id */ public static final int EVENTID = 12; /** * 数字0 */ public static final int NUM_ZERO = 0; /** * 数字1 */ public static final int NUM_ONE = 1; /** * 数字2 */ public static final int NUM_TWO = 2; /** * 数字-1 */ public static final int NUM_MINUS_1 = -1; /** * 字节大小512 */ public static final int BYTE_512 = 512; /** * 500错误编码 */ public static final int CODE_500 = 500; /** * 500错误提示信息 - 状态非法 */ public static final String CODE_500_MSG_1 = "状态非法!"; /** * 500错误提示信息 - 非督导用户不允许查看质量检测记录 */ public static final String CODE_500_MSG_2 = "非督导用户不允许查看质量检测记录!"; /** * 500错误提示信息 - 这条质量监测已经完成！无法修改 */ public static final String CODE_500_MSG_3 = "这条质量监测已经完成！无法修改！"; /** * 500错误提示信息 - 提交失败，材料上传不能为空 */ public static final String CODE_500_MSG_4 = "提交失败，材料上传不能为空"; /** * 500错误提示信息 - 提交失败，请稍后重试或联系管理员 */ public static final String CODE_500_MSG_5 = "提交失败，请稍后重试或联系管理员！"; /** * 500错误提示信息 - 提交失败，意见反馈不能为空 */ public static final String CODE_500_MSG_6 = "提交失败，意见反馈不能为空!"; /** * 405错误编码 */ public static final int CODE_405 = 405; /** * 405错误提示信息 - 该信息只允许督导查看 */ public static final String CODE_405_MSG_1 = "该信息只允许督导查看!"; /** * 200成功编码 */ public static final int CODE_200 = 200; /** * 200成功提示信息 - 该信息只允许督导查看 */ public static final String CODE_200_MSG_1 = "提交成功!"; /** * 错误提示信息 - 尚未选择记录 */ public static final String DELETE_FAIRURE_MSG = "删除失败，尚未选择记录！"; /** * 错误提示信息 - 尚未选择记录 */ public static final String NO_RECORD_SELECTED = "尚未选择记录！"; /** * 字符编码utf-8 */ public static final String UTF_8 = "utf-8"; /** * 默认pid */ public static final int PID = 0; /** * 默认层级 */ public static final int DEFUALT_LAYER = 1; /** * 不适当最低得分 */ public static final Integer MIN_SCORE = 1; /** * 优秀最高得分 */ public static final Integer MAX_SCORE = 7; /** * map的hash初始值 */ public static final int HASH_MAP_INIT_VALUE = 32; /** * 全园平均分 */ public final static String WHOLE_AVERAGE = "全园平均分"; /** * 查询失败 */ public final static String QUERY_FAIRURE = "查询失败"; /** * 操作成功 */ public final static String SUCCESS_MSG = "操作成功！"; /** * 操作失败 */ public final static String FARIURE_MSG = "操作失败！"; /** * 导出失败 */ public final static String FARIURE_EXPORT = "导出失败！"; /** * 请求头 - 文档 */ public final static String CONTENT_TYPE_WORD = "application/msword"; /** * 请求头 - 下载 */ public final static String CONTENT_TYPE_DOWNLOAD = "application/x-download"; /** * 请求头 - 二进制文件 */ public final static String CONTENT_TYPE_STEAM = "application/octet-stream;charset=UTF-8"; /** * 请求头 */ public final static String USER_AGENT = "User-Agent"; /** * 请求头 */ public final static String CONTENT_TYPE = "Content-Type"; /** * 连接 */ public final static String CONNECTION = "Connection"; /** * 关闭连接 */ public final static String CLOSE = "close"; /** * 连接 */ public final static String ACCESS_CONTROL_ALLOW_ORIGIN = "Access-Control-Allow-Origin"; /** * 连接 */ public final static String CONTENT_DISPOSITION = "Content-Disposition"; /** * 浏览器 - ie */ public final static String MSIE = "MSIE"; /** * 浏览器 - Firefox */ public final static String FIREFOX = "Firefox"; /** * 填写报告的step */ public final static String MODULE_STEP3_REPORT = "qualityreport"; /** * 督导下园核实的材料 */ public final static String MODULE_STEP1_MATERIAL = "qualitymetrail"; /** * 数字3 */ public final static int NUM_3 = 3; /** * 数字4 */ public final static int NUM_4 = 4; /** * 数字5 */ public final static int NUM_5 = 5; /** * 数字6 */ public final static int NUM_6 = 6; /** * 数字7 */ public final static int NUM_7 = 7; /** * 数字8 */ public final static int NUM_8 = 8; /** * 数字9 */ public final static int NUM_9 = 9; /** * 数字10 */ public final static int NUM_10 = 10; /** * 数字11 */ public final static int NUM_11 = 11; /** * 数字12 */ public final static int NUM_12 = 12; /** * 数字13 */ public final static int NUM_13 = 13; /** * 数字14 */ public final static int NUM_14 = 14; /** * 数字15 */ public final static int NUM_15 = 15; /** * 数字16 */ public final static int NUM_16 = 16; /** * 数字17 */ public final static int NUM_17 = 17; /** * 数字18 */ public final static int NUM_18 = 18; /** * 数字19 */ public final static int NUM_19 = 19; /** * 数字20 */ public final static int NUM_20 = 20; /** * 格式化数字 */ public final static String DECIMAL_Format = "######.00"; } 复制代码
页面层处理：
前端增加一个form提交，使用form提交表单数据，实现word导出功能:
(注意使用的模板引擎是thymeleaf)
html代码:
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="container"> <div id="vue1" class="row"> <!-- <form @submit.prevent="submit">--> <!-- <div>--> <!-- 导出word名称：<input class="form-control" type="text" v-model="student.wordName">--> <!-- </div>--> <!-- <div>--> <!-- test0：<input type="text" class="form-control" v-model="student.test0">--> <!-- test1：<input type="text" class="form-control" v-model="student.test1">--> <!-- test2：<input type="text" class="form-control" v-model="student.test2">--> <!-- test4：<input type="text" class="form-control" v-model="student.test4">--> <!-- test5：<input type="text" class="form-control" v-model="student.test5">--> <!-- test6：<input type="text" class="form-control" v-model="student.test6">--> <!-- </div>--> <!-- <input type="submit" class="btn btn-danger" value="提交">--> <!-- </form>--> <form method="post" action="/quality/exportword"> <div> 导出word名称：<input class="form-control" type="text" name="wordName"> </div> <div> test0：<input type="text" class="form-control" name="test0"> test1：<input type="text" class="form-control" name="test1"> test2：<input type="text" class="form-control" name="test2"> test4：<input type="text" class="form-control" name="test4"> test5：<input type="text" class="form-control" name="test5"> test6：<input type="text" class="form-control" name="test6"> </div> <input type="submit" class="btn btn-danger" value="提交"> </form> </div> </div> </body> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> <script th:src="@{/js/exportword.js}"></script> </html> 复制代码
js代码
使用js代码处理form表单提交，使用了jquery进行导出，其实一直不太懂前端怎么导出后台产生的二进制流，做法挺多，下次写一篇文章好好汇总一下几种用法。
var v1 = new Vue({ el: '#vue1', data: { counter: 0, student: { test0:'', test1:'', test2:'', test3:'', test4:'', test5:'', test6:'', wordName: '', } }, methods: { test: function () { console.log(this.counter); }, submit() { console.log(this.student); var url = '/quality/exportword'; var formData = JSON.stringify(this.student); // this指向这个VUE实例 data默认绑定在实例下的。所以直接this.student就是要提交的数据 this.$http.post(url, formData).then(function (data) { console.log(data); let blob = new Blob([data.data],{ type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); let objectUrl = URL.createObjectURL(blob); window.location.href = objectUrl; }).catch(function () { console.log('test'); }); } } }) 复制代码
结尾：
个人水平一般，希望通过这篇文章可以帮到读者，有错误的地方欢迎指点，看到会及时改成，谢谢！
前段时间忙于面试找到新的地方工作了，等工作安定之后，会继续深耕博客和技术栈。
