使用Docxtemplater生成Docx时文本无法加粗/变红且显示undefined

一、解决文档显示“undefined”的问题 #

• 核对模板占位符与数据键的一致性：模板中的占位符（如{username}）必须和传入数据对象的键名完全匹配，包括大小写、拼写，不能有遗漏。
• 验证模板文件加载正确性：确保JSZip成功读取issue_uncovered5.docx文件。浏览器环境下检查FileReader是否正确获取Blob数据；Node.js环境下确认文件路径无误，fs.readFileSync返回有效内容。
• 检查数据完整性：打印传入Docxtemplater的data对象，确认所有需要替换的字段都有有效值，不存在字段值为undefined的情况。
• 配置空值兜底：初始化Docxtemplater时添加nullGetter配置，将空值/undefined替换为空字符串：

const doc = new Docxtemplater(zip, {
  nullGetter: () => ''
});

二、解决文本加粗、红色格式失效的问题 #

针对Docxtemplater 3.9.1版本，结合JSZip 2.6.1，可通过两种方式实现富文本格式：

方式1：直接插入Word XML片段 #

Word文档的格式基于Open XML，可直接传入格式化的XML片段：

1. 在模板中使用{@占位符}格式（@表示直接插入XML内容），例如模板中写{@highlightText}。
2. 数据中传入对应的XML字符串：

const data = {
  highlightText: '<w:r><w:rPr><w:b/><w:color w:val="FF0000"/></w:rPr><w:t>这是加粗红色的文本</w:t></w:r>'
};

3. 初始化Docxtemplater时确保允许XML解析：

const doc = new Docxtemplater(zip, {
  nullGetter: () => '',
  parser: tag => ({ get: scope => scope[tag] })
});

方式2：使用HTML转换模块（docxtemplater-contrib-html） #

1. 安装兼容版本的模块：

npm install docxtemplater-contrib-html@^1.0.0 --save

2. 初始化时加载模块：

const HtmlModule = require('docxtemplater-contrib-html');
const doc = new Docxtemplater(zip, {
  modules: [new HtmlModule()],
  nullGetter: () => ''
});

3. 数据中传入带样式的HTML字符串：

const data = {
  highlightText: '<strong style="color: #ff0000;">这是加粗红色的文本</strong>'
};

4. 模板中同样使用{@highlightText}占位符。

额外注意事项 #

• 模板中的占位符必须位于普通段落内，不能在文本框、表格单元格外的特殊容器中，否则格式可能无法生效。
• 确保所有依赖包版本兼容：JSZip 2.6.1搭配Docxtemplater 3.9.1时，避免使用过高版本的富文本模块，防止出现兼容性问题。

内容的提问来源于stack exchange，提问作者Ramz