需求为:用户通过编辑模板,指定需要导出的字段,支持根据不同模板实现预览打印pdf及导出excel
思路:
模板编辑:前端使用富文本编辑器编辑所需的模板,通过拖拽或其他方式将不同字段的FreeMarker语法插入到指定位置
将编辑器的HTML模板保存至服务器
填充数据:使用FreeMarker根据HTML模板填充数据,生成包含数据的HTML字符串
PDF预览及打印:根据填充数据后的HTML,使用itext生成pdf文件,前端使用pdf.js访问该文件进行预览及打印
Excel导出:根据填充数据后的HTML,使用EasyPOI生成Excel文件,作为附件下载导出
模板编辑篇
这是最难做的,之前工作中有个用到编辑动态模板的,然后是两个前端高级工程师花了一个月直接改编辑器源码才实现功能。以我的水平,自然是分分钟搞不定的,只能先简单手动写个模板
使用百度ueditor
image.png
获取生成的HTML
坑1:重新从服务器拿回HTML特么会重新格式化,代码中 本来不应该存在,它自己加上去的
坑2:直接使用插入表格时,虽然在编辑器显示有表格边框,但实际html不带边框,需要自己编辑table border属性
坑3:不支持指定特殊属性,因为编辑器会格式化掉它不认识的东东
模板标题
日期:${time}
ID |
父ID |
字典名 |
备注 |
${(data.id)!} |
${(data.parentId)!} |
${(data.name)!} |
${(data.comment)!} |
数据填充篇
注意:模板来源是字符串而不是ftl文件,html是返回字符串而不是html文件,代码中ftl及html文件写出只是为了调试用
还是因为富文本编辑器原因,freemarker遍历list的语法是在这里处理的,这样限制了模板支持的格式,根源还是