前端docxtemplater导出word文件，动态表格的导出方式

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

使用docxtemplater来导出word文件，遇到的动态表格问题。

一、导出动态表格的问题

当使用docxtemplater来导出文件时，如果表格的表头和数据都是动态不固定的。使用导出固定表格的方式，好像行不通，像这样

后面想用docxtemplater的html模块来弄，但是弄了很久发现，html模块好像是收费的（坑）。后面又摸索了很久，试了一下用xml的方法来生成动态表格，原理就是在准备word数据时就动态生成表格的xml数据格式，在模板上就只需要引用这个xml表格数据字段

二、使用方法

1.动态生成xml表格数据

代码如下（示例）：

// 动态生成 XML 表格
generateXmlTable(tableConfig) {
    const { headers, rows, tableStyle = {} } = tableConfig;
    
    let xml = `<w:tbl>
        <w:tblPr>
            <w:tblW w:w="0" w:type="auto"/>
            <w:tblBorders>
                <w:top w:val="single" w:sz="4" w:color="000000"/>
                <w:left w:val="single" w:sz="4" w:color="000000"/>
                <w:bottom w:val="single" w:sz="4" w:color="000000"/>
                <w:right w:val="single" w:sz="4" w:color="000000"/>
                <w:insideH w:val="single" w:sz="4" w:color="000000"/>
                <w:insideV w:val="single" w:sz="4" w:color="000000"/>
            </w:tblBorders>
        </w:tblPr>
        <w:tblGrid>`;
    
    // 生成列定义
    headers.forEach(() => {
        xml += `<w:gridCol w:w="2000"/>`;
    });
    
    xml += `</w:tblGrid>`;
    
    // 表头
    xml += `<w:tr>`;
    headers.forEach(header => {
        xml += `
            <w:tc>
                <w:tcPr>
                    <w:shd w:val="clear" w:color="auto" w:fill="E6E6E6"/>
                </w:tcPr>
                <w:p>
                    <w:r>
                        <w:t>${header.label}</w:t>
                    </w:r>
                </w:p>
            </w:tc>`;
    });
    xml += `</w:tr>`;
    
    // 数据行
    rows.forEach(row => {
        xml += `<w:tr>`;
        headers.forEach(header => {
            xml += `
                <w:tc>
                    <w:p>
                        <w:r>
                            <w:t>${row[header.key] || ''}</w:t>
                        </w:r>
                    </w:p>
                </w:tc>`;
        });
        xml += `</w:tr>`;
    });
    
    xml += `</w:tbl>`;
    
    return xml;
}

2.在数据准备中使用

代码如下（示例）：

// 在数据准备中使用
prepareXmlTableData(wordData) {
    const tableConfig = {
    //表头数据根据情况动态获取
        headers: [
            { key: 'name', label: '姓名' },
            { key: 'age', label: '年龄' },
            { key: 'department', label: '部门' },
            { key: 'salary', label: '薪资' }
        ],
        //表格数据，根据情况动态获取
        rows: [
            { name: '张三', age: '28', department: '技术部', salary: '¥15,000' },
            { name: '李四', age: '32', department: '市场部', salary: '¥12,000' }
        ]
    };
    //返回的就是表格的xml数据，复制给模板的表格数据字段
    return {
        dynamicTable: this.generateXmlTable(tableConfig)
    };
}

3.在模板中使用

使用{@模板的表格xml数据字段}将表格数据渲染到word文档里

总结

使用xml来对动态的表格数据进行展示