Office JS插入Word模板后字体大小与字体家族不符合预期

现有实现代码 #

获取模板的Base64字符串 #

let url = `${location.origin}/assets/templates/test.docx`;
fetch(url).then(response => response.blob()).then((base64String) => {
  blobToBase64(base64String).then(async (res: any) => {
    let documentBase64 = res.split(',')[1];
    this.updateDocument(documentBase64);
  }).catch(error => {
    console.log(error);
  });       
}).catch(error =>  {
  console.log(error);
})

更新Word文档内容 #

updateDocument(templateBase64) {
  Word.run(async context => {
    context.document.insertFileFromBase64(templateBase64, Word.InsertLocation.replace);
    await context.sync();
  })
}

预期效果：文档的字体大小与字体家族与模板完全一致

问题原因 #

使用insertFileFromBase64的replace模式时，仅会替换文档内容，但原文档的默认样式（如Normal样式）可能会覆盖模板中的字体设置。这是因为样式继承优先级的问题：原文档的内置样式会被保留，模板内容的样式如果未明确覆盖内置样式，就会被原文档的样式覆盖。

解决方案 #

方案1：替换后强制应用模板的默认样式 #

在插入模板内容后，手动获取并应用模板的默认字体设置到文档的内置样式上：

updateDocument(templateBase64) {
  Word.run(async context => {
    // 插入模板内容
    context.document.insertFileFromBase64(templateBase64, Word.InsertLocation.replace);
    await context.sync();

    // 获取文档的Normal样式（默认段落样式）
    const normalStyle = context.document.getStyles().getByName("Normal");
    normalStyle.load("font");
    await context.sync();

    // 直接设置为模板的字体参数（替换为你的模板实际字体）
    normalStyle.font.name = "微软雅黑";
    normalStyle.font.size = 11;

    await context.sync();
  }).catch(error => {
    console.error("更新文档样式失败:", error);
  });
}

方案2：基于模板创建新文档（推荐） #

如果不需要保留原文档的任何内容，直接基于模板创建新文档可以彻底避免样式冲突：

createDocumentFromTemplate() {
  const templateUrl = `${location.origin}/assets/templates/test.docx`;
  // 使用Office JS API创建基于模板的新文档
  Office.context.document.createNewDocument(templateUrl)
    .catch(error => console.error("创建新文档失败:", error));
}

方案3：应用模板中的自定义样式 #

如果模板使用了自定义样式而非内置样式，需要批量应用这些样式到所有内容段落：

updateDocument(templateBase64) {
  Word.run(async context => {
    context.document.insertFileFromBase64(templateBase64, Word.InsertLocation.replace);
    await context.sync();

    // 获取模板中的自定义样式（替换为你的自定义样式名称）
    const customTemplateStyle = context.document.getStyles().getByName("TemplateBodyStyle");
    const allParagraphs = context.document.body.paragraphs;
    allParagraphs.load("items");
    await context.sync();

    // 为所有段落应用自定义样式
    allParagraphs.items.forEach(paragraph => {
      paragraph.style = customTemplateStyle;
    });

    await context.sync();
  }).catch(error => {
    console.error("应用自定义样式失败:", error);
  });
}

关键注意事项 #

1. 确保模板中的字体设置是应用在**内置样式（如Normal）**上，这样所有内容会自动继承该样式。
2. 如果模板使用自定义样式，需要确认样式名称与代码中引用的一致。
3. 执行样式修改后必须调用context.sync()才能将更改同步到Word客户端。

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