基于HTML表单更新Word文档的JS代码故障排查求助

你的代码核心逻辑框架没问题，但存在几个关键细节错误导致功能失效，逐一梳理并修复：

1. 缺失依赖检查与加载 #

代码仅校验了Mammoth.js，但还依赖docx.js和FileSaver.js（用于saveAs下载函数），若这两个库未加载，代码会静默失败。

• 确保HTML中引入这两个依赖：

  <script src="https://unpkg.com/docx@8.5.0/build/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
  

2. 正则替换的特殊字符未转义 #

占位符中的$和{}是正则表达式的特殊语法字符，直接用new RegExp(key, "g")会导致匹配逻辑失效。需要先转义这些字符：

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 替换循环修改为：
for (const key in replacements) {
  const escapedKey = escapeRegExp(key);
  docText = docText.replace(new RegExp(escapedKey, "g"), replacements[key]);
}

3. FileReader回调的异步处理缺陷 #

原代码中reader.onload的回调嵌套在modifyDocument内，若读取文件出错，错误无法被外层try/catch捕获。建议将FileReader封装为Promise，统一异步处理逻辑：

async function readFileAsArrayBuffer(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsArrayBuffer(file);
  });
}

// 在modifyDocument中替换原reader逻辑：
const arrayBuffer = await readFileAsArrayBuffer(file);

4. 原文档占位符的格式问题 #

Mammoth提取的是纯文本，若原Word文档中的占位符带有格式（如加粗、换行、空格分隔），提取后文本会变成${ name }而非${name}，导致匹配失败。

• 打开浏览器控制台（F12）查看Extracted Text输出，确认占位符的实际格式，调整代码中的匹配键或统一原文档占位符格式。

修复后的完整代码 #

document.addEventListener("DOMContentLoaded", function () {
  // 检查所有依赖
  if (typeof Mammoth === "undefined") {
    console.error("Mammoth.js未加载！");
    alert("Mammoth.js未加载，请检查网络或脚本路径。");
    return;
  }
  if (typeof docx === "undefined") {
    console.error("docx.js未加载！");
    alert("docx.js未加载，请检查网络或脚本路径。");
    return;
  }
  if (typeof saveAs === "undefined") {
    console.error("FileSaver.js未加载！");
    alert("FileSaver.js未加载，请检查网络或脚本路径。");
    return;
  }

  document.getElementById("uploadDataBtn").addEventListener("click", modifyDocument);
});

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

async function readFileAsArrayBuffer(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsArrayBuffer(file);
  });
}

async function modifyDocument() {
  const fileInput = document.getElementById("fileUpload");
  if (fileInput.files.length === 0) {
    alert("请上传DOCX文档。");
    return;
  }

  const file = fileInput.files[0];
  try {
    const arrayBuffer = await readFileAsArrayBuffer(file);
    const result = await Mammoth.extractRawText({ arrayBuffer });
    let docText = result.value;

    console.log("提取的文本:", docText);

    const replacements = {
      "${name}": document.getElementById("name")?.value || "",
      "${website}": document.getElementById("website")?.value || "",
      "${responsible}": document.getElementById("responsible")?.value || "",
      "${timeline}": document.getElementById("timeline")?.value || "",
      "${description}": document.getElementById("description")?.value || "",
      "${type}": document.getElementById("type")?.value || "",
      "${time}": document.getElementById("time")?.value || "",
      "${information}": document.getElementById("information")?.value || "",
      "${referenca}": document.getElementById("referenca")?.value || "",
      "${kodi}": document.getElementById("kodi")?.value || "",
    };

    // 替换占位符
    for (const key in replacements) {
      const escapedKey = escapeRegExp(key);
      docText = docText.replace(new RegExp(escapedKey, "g"), replacements[key]);
    }

    console.log("替换后的文本:", docText);

    // 生成新文档
    const doc = new docx.Document({
      sections: [
        {
          properties: {},
          children: [new docx.Paragraph({ text: docText })],
        },
      ],
    });

    const blob = await docx.Packer.toBlob(doc);
    saveAs(blob, "Updated_DST.docx");
  } catch (error) {
    console.error("处理文档出错:", error);
    alert("处理文档时出错。");
  }
}

额外调试步骤 #

1. 打开浏览器控制台（F12），查看是否有报错信息。
2. 确认Extracted Text中存在目标占位符，且格式与代码中的键完全一致。
3. 检查Modified Text中占位符是否被成功替换。

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