<style>

        table th {

            width: 100px;

            height: 50px;

            border: 1px solid black;

        }

        td {

            color: green;

            text-align: center;

            border: 1px solid black;

            font-size: 18px;

        }

        .del{

            cursor: pointer;

        }

    </style>

        <table>

            <thead>

                <tr>

                    <th>姓名</th>

                    <th>语言</th>

                    <th>分数</th>

                    <th>操作</th>

                </tr>

            </thead>

            <tbody></tbody>

        </table>

   <script>

        var stus = [{ //假数据

            name: '小明',

            class: 'JavaScript',

            score: 100

        }, {

            name: '小红',

            class: 'JavaScript',

            score: 98

        }, {

            name: '小白',

            class: 'JavaScript',

            score: 89

        }, {

            name: '小石',

            class: 'JavaScript',

            score: 85

        }, {

            name: '小石',

            class: 'JavaScript',

            score: 85

        }];

        //数据写入

        var tbody = document.querySelector('tbody'); //找到tbody标签

        for (var i = 0; i < stus.length; i++) { //对stus进行循环遍历，并建立tr标签

            var tr = document.createElement('tr');

            tbody.appendChild(tr);

            for (var k in stus[i]) { //对假数据进行遍历

                var td = document.createElement('td'); //新建td

                td.innerHTML = stus[i][k]; //将对象数据写进td中

                tr.appendChild(td);

            }

            //删除按钮的建立  

            var td = document.createElement('td');

            td.innerHTML = '删除';

            td.className = 'del'

            tr.appendChild(td);

        }

        //对'删除'进行点击事件    

        var delClick = document.getElementsByClassName('del');

        for (var i = 0; i < delClick.length; i++) {

            delClick[i].onclick = function () {

                tbody.removeChild(this.parentNode);    

            }

        }

word文档如何保存为FreeMarker使用的xml文件

1.点击文件-》另存为-》其他格式-》XML文件

普通模板

模板中设置${ }标志，freemarker将匹配到的内容替换

//数据源
Map<String, Object> map = new HashMap<>();
map.put("urgentCount", 10);
map.put("majorCount", 5);
map.put("commonlyCount", 7);

运行结果

循环模板

在word中编辑好模板后另存为.xml格式，打开后如下图：

//数据源
List<Map<String, Object>> list = new ArrayList<>();
Map<String, Object> map1 = new HashMap<>();
map1.put("num", 1);
map1.put("code", "X-001");
map1.put("type", "未受理");
map1.put("slevel", 3);
map1.put("ulevel", "三级");
map1.put("page", 1);
此处省略其他数据......
list.add(map1);
list.add(map2);
list.add(map3);

List<Map<String, Object>> tempList= new ArrayList<>();
Map<String, String> freeMarkerMap = new HashMap<>();
freeMarkerMap .put("list", tempList);

//<w:tbl></w:tbl>表格标志
//<w:tr></w:tr>表格行标志
//#list代表循环，as前的list为freeMarkerMap数据的key，d为list的简称
<#list list as d>
	//需要循环的内容，我需要循环生成多行，所以此处包含的是表格的行
	//也可以循环生成多个表，那么此处应该包含<w:tbl></w:tbl>
</#list>

运行结果

if语句

//如果dataList存在且有内容进入循环
<#if dataList?exists && (dataList?size > 0)>
	<#list dataList as l>
		<#if l.picNum == 1>//l.picNum是list中map的key
			${l.name}
		<#elseif l.picNum == 2>
			${l.name}
		<#elseif l.picNum == 3>
			${l.name}
		</#if>
	</#list>
<#else>

</#if>

图片

将图片插入word中保存为xml文件之后图片的数据源如下图：

黑色字体部分就是base64格式的图片，将其删除后图片依然存在只是不显示，如下图：

插入图片需要设置三个位置：

1.关联关系：在xml文件的头部；
	Id是所有关联关系的编号，图片的Id与展示图片关联，不可重复
	target是图片的目标，与数据源关联，不可重复
	type末端的Image代表图片

2.展示的图片：在word文档插入图片的位置。
	<v:imagedata> 中的r:id通过关联关系可以获取到图片数据源

3.数据源：在xml文件下方。
	freemarker图片是通过base64进行保存的，清除占位图片的数使用${d.image1Source}占位，传入的数据应为图片的base64编码
	pkg:name与关联关系的target相同

运算符

因为<>会结束语句使用时可以使用括号将运算语句包起来(x > 0)，
也可以使用freemarker的运算符：
>	gt;
<	lt;
>=	gte;
<=	lte;
==
!=

注释方式

1.叹号 <!-- 注释 --> 发布之后，客户端可以看到注释内容

2.井号 <#-- 注释 --> 发布之后，客户端看不到注释内容

页眉页脚

<w:sectPr>
	<wLpgNumType w:start="1">//页码从1开始
</w:sectPr>

分页符

<w:p ><w:r><w:br w:type="page" /></w:r></w:p>

————————————————
版权声明：本文为CSDN博主「学习要趁早z」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42677452/article/details/112027051