求助：表单数据填充Word模板失败，可获取数据但无法生成文件

核心问题 #

1. 表单默认提交中断逻辑：按钮位于<form>标签内，点击时会触发表单默认提交行为，页面刷新导致Word生成代码无法执行完成。
2. 点击事件未关联：JS中定义的generate函数未与按钮绑定，点击按钮不会触发生成逻辑。
3. 模板路径可能错误：若doc.docx不在当前HTML文件同级目录，会加载失败，无法生成文档。

修复后的完整代码 #

HTML部分

<form id="myForm">
    <label for="name">Nom:</label>
    <input type="text" id="name" name="name" value="John"><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" value="john@example.com"><br>
    <button id="generate" type="button">Générer le document</button>
</form>

JS部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.39.1/docxtemplater.js"></script>
<script src="https://unpkg.com/pizzip@3.1.4/dist/pizzip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
<script src="https://unpkg.com/pizzip@3.1.4/dist/pizzip-utils.js"></script>
<script>
    function loadFile(url, callback) {
        PizZipUtils.getBinaryContent(url, callback);
    }

    function generate() {
        const form = document.getElementById('myForm');
        const formData = new FormData(form);
        const data = {};
        formData.forEach((value, key) => {
            data[key] = value;
        });
        console.log("Données du formulaire:", data);

        loadFile(
            "doc.docx",
            function (error, content) {
                if (error) {
                    console.error("Erreur lors du chargement du fichier doc.docx:", error);
                    return;
                }
                const zip = new PizZip(content);
                const doc = new window.docxtemplater(zip, {
                    paragraphLoop: true,
                    linebreaks: true,
                });
                doc.render(data);
                const blob = doc.getZip().generate({
                    type: "blob",
                    mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
                    compression: "DEFLATE",
                });
                saveAs(blob, "Contrat_" + data.name + ".docx");
            }
        );
    }

    // 绑定按钮点击事件
    document.getElementById('generate').addEventListener('click', generate);
</script>

额外注意事项 #

• 确保doc.docx模板文件与HTML文件在同一目录，且模板内使用{name}、{email}这样的占位符（与表单字段name属性完全对应）。
• 若本地直接打开HTML文件（file://协议），可能存在跨域限制导致模板加载失败，建议使用本地服务器（如VS Code的Live Server插件）运行。
• 打开浏览器控制台（F12）查看报错信息，可快速定位剩余问题（如模板格式错误、资源加载失败等）。

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