前端使用‌Docxtemplater模板语法进行数据匹配，动态生成word文档

‌Docxtemplater是一个用于生成和操作Word文档的JavaScript库，它允许开发者在前端动态生成和编辑Word文档，用于动态生成报表等功能。

使用方法

‌安装依赖‌：首先，你需要安装Docxtemplater及其相关依赖。可以通过npm安装这些库：
复制代码
```
pnpm install docxtemplater pizzip jszip-utils file-saver
```

‌引入依赖‌：在项目中引入必要的模块：

javascript 复制代码

import Docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import { saveAs } from 'file-saver';

‌创建模板文档‌：在public文件下创建.docx模板文档，变量用大括号包裹。{#变量}表示循环

4. ‌模板数据匹配‌：在页面中创建对象进行字段对应

xml 复制代码

<template>
  <div>
    <!-- 下载和打印按钮 -->
    <button v-if="outputDoc" @click="downloadDocument">
      Download Document
    </button>
    <button v-if="outputDoc" @click="printDocument">Print Document</button>

    <!-- 错误提示 -->
    <div v-if="errorMessage" style="color: red">
      {{ errorMessage }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import { saveAs } from "file-saver";

const outputDoc = ref(null); // 存储生成的文档
const errorMessage = ref(""); // 存储错误信息
const userData = {
  name: "John Doe",
  email: "john.doe@example.com",
  age: 30,
  option: [
    {
      id: 1,
      gender: 1,
      address: "qqq",
    },
    {
      id: 2,
      gender: 2,
      address: "www",
    },
    {
      id: 3,
      gender: 3,
      address: "eee",
    },
  ],
};

// 读取并处理模板文件
const processTemplate = async () => {
  try {
    // 从 public 目录中读取模板文件
    const response = await fetch("/template.docx");

    const arrayBuffer = await response.arrayBuffer();
    const zip = new PizZip(arrayBuffer);
    const doc = new Docxtemplater().loadZip(zip);

    // // 设置模板数据
    doc.setData(userData);

    try {
      doc.render(); // 渲染模板
      errorMessage.value = ""; // 清空错误信息
    } catch (error) {
      console.error("Error rendering template:", error);
      errorMessage.value =
        "Error rendering template. Please check the template and data.";
      if (error.properties && error.properties.errors) {
        error.properties.errors.forEach((err) => {
          console.error("Error details:", err);
        });
      }
      return;
    }

    // 生成输出文档
    const out = doc.getZip().generate({ type: "blob" });
    outputDoc.value = out;
  } catch (error) {
    console.error("Error loading template file:", error);
    errorMessage.value = "Error loading template file.";
  }
};

// 下载文档
const downloadDocument = () => {
  saveAs(outputDoc.value, "output.docx");
};

// 打印文档
const printDocument = () => {
  const url = URL.createObjectURL(outputDoc.value);
  const printWindow = window.open(url);
  printWindow.onload = () => {
    printWindow.print();
  };
};

// 组件挂载时处理模板
onMounted(() => {
  processTemplate();
});
</script>

‌页面样式 6. 输出文档