java利用Freemaker模板引擎生成word并导出

目录

项目背景

整体思路

1、制作ftl模板

2、pom引入

3、controller层代码

4、前端接收数据

5、导出word文档效果

---

项目背景

后台springboot框架，前端vue3.0+element-plus

整体思路

制作好要导出的word模板，后台将数据写入文件中传给前端，前端保存对应的word文档即可。（我在网上搜相关教程时，看到有的帖子是先生成了word文档，将word文档以流的形式给前端，导出之后，再将生成的word文档删除掉，其实这相当于多次一举，所以你在看的时候注意甄别实现思路）

1、制作ftl模板

具体步骤参考我之前整理的文章即可：利用Freemaker模板引擎制作包含表格和图片的word导出模板

2、pom引入

        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.30</version>
        </dependency>

注：至于properties或yml文件中关于freemaker的配置，我这里采用的都是默认的，所以没有额外配置。 

3、controller层代码

    @ApiOperation("根据freemaker模板导出word文档到客户端")
    @GetMapping("/testExport")
    public void testExport(HttpServletResponse response) throws Exception {
        //编辑测试数据
        Map<String, Object> dataMap = new HashMap<>();
        dataMap.put("name", "zhangsan");
        dataMap.put("sex","1");
        dataMap.put("age", "100");
        dataMap.put("registerTime",new Date());

        List<Map<String,String>> list = new ArrayList<>();
        Map<String,String> map = new HashMap<>();
        map.put("cn","中国");
        map.put("eng","China");
        list.add(map);

        map=new HashMap<>();
        map.put("cn","很高兴见到你");
        map.put("eng","Nice to meet you!");
        list.add(map);

        map=new HashMap<>();
        map.put("cn","星期一");
        map.put("eng","Monday");
        list.add(map);

        map=new HashMap<>();
        map.put("cn","我爱你");
        map.put("eng","I Love You");
        list.add(map);

        map=new HashMap<>();
        map.put("cn","菜鸟茜");
        map.put("eng","Rear");
        list.add(map);

        dataMap.put("testList",list);
        dataMap.put("imgData",WordUtil.getImageBase("http://218.206.197.133:9001/picture/problem/2022/06/01/picture_20220601172319A001.jpg"));


        // 设置FreeMarker的版本和编码格式
        Configuration configuration = new Configuration(Configuration.VERSION_2_3_23);
        configuration.setDefaultEncoding("UTF-8");

        // 设置FreeMarker生成Word文档所需要的模板的路径

        // 此处把模版文件都放在 resources 下的 templates 中
       configuration.setClassForTemplateLoading(FlyWordController.class,"/templates");

        // 设置FreeMarker生成Word文档所需要的模板
        Template template = configuration.getTemplate("/test.ftl", "UTF-8");

        response.reset();
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/msword");
        response.setHeader("Content-Disposition", "attachment; filename=" +  URLEncoder.encode("我的报告.doc" , "UTF-8"));
        // 把本地文件发送给客户端
        Writer out = response.getWriter();
        template.process(dataMap, out);
        out.close();

    }

注：图片显示不是直接用url，而是需要将图片转化为base64码，

具体参照：读取远程图片并转base64码

4、前端接收数据

我之前在网上看了关于导出word文档的文章，之前的几步都写好了，但是前端一直没反应，我就在拼命找后端的错误，后来我才恍然大悟——也许是我接收的方式不对。

所以前端接收时一定要注意。

我把代码贴在下边给各位一个参考：

// 导出word文档
export function testExport() {
    return request({
        url: '/uav/flyWord/testExport',
        method: 'get',
        responseType: 'blob',
        headers: {
            'content-disposition': 'attachment;filename=docx', // filename为下载类型
            'content-type': 'application/msword;charset=utf-8'
        }
    })
}

function testDownload() {
    testExport().then((res) => {
        //下载
        var blob = new Blob([res], {
            type: "application/octet-stream;chartset=UTF-8",
        });
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement("a");
        var fileName = "测试文档.doc";

        a.download = fileName;
        a.href = url;
        a.click();
    });
}

5、导出word文档效果

关于此篇，还有什么不清楚的，欢迎码友评论区交流……