一、先看导出的效果：

二、使用到的依赖：

所需要得依赖为：docxtemplater、file-saver、jszip-utils、pizzip。

下载依赖：

npm install docxtemplater
 
npm install pizzip

npm install file-saver

npm install jszip-utils

三、新建模板：

需要自己手动创建一个word文档，并把格式调整好：

例如这样得：

把这个新建的word模板文件 放到vue项目中公共文件的位置，

在vue2项目里放到static文件夹下，

在vue3项目中放到public文件夹下。

四、开始使用：

复制代码到自己得项目里面点击导出按钮即可导出文档

<template>
  <el-button type="primary" @click="exportWord">导出Word</el-button>
</template>

<script setup>
import { ref } from 'vue';
import docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import { saveAs } from 'file-saver';
import JSZipUtils from 'jszip-utils';


// 表格标题数据
const tableTitle = ref({
  titleName: "2024年12月05日",
  titleJob: "XXX外贸公司",
  titleUnit: '万元'
});

// 表格内容数据
const tableData = ref([
  {
    department: "销售A部",
    employee: "张三",
    job: "经理",
    yesterday: 0.31,
    today: 2.68,
    total: 422.80,
    remark: '在职',
  },
  {
    department: "销售B部",
    employee: "李四",
    job: "经理",
    yesterday: 3.04,
    today: 32.26,
    total: 3250.94,
    remark: '在职',
  },
  {
    department: "销售C部",
    employee: "王五",
    job: "员工",
    yesterday: 1.58,
    today: 13.72,
    total: 5133.14,
    remark: '实习',
  },
]);

// 导出Word的方法
const exportWord = () => {
  // 获取模板文件的二进制内容 day_template.docx在public目录下
  JSZipUtils.getBinaryContent("day_template.docx", function (error, content) {
    if (error) {
      throw error;
    }

    // 创建一个PizZip实例，内容为模板的内容
    let zip = new PizZip(content);
    // 使用PizZip实例创建docxtemplater实例
    let doc = new docxtemplater(zip);

    try {
      // 直接在render方法中传入模板数据，替换变量
      doc.render({
        ...tableTitle.value,
        table: tableData.value
      });
    } catch (error) {
      // 抛出异常
      let e = {
        message: error.message,
        name: error.name,
        stack: error.stack,
        properties: error.properties
      };
      console.log(JSON.stringify({ error: e }));
      throw error;
    }

    // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
    let out = doc.getZip().generate({
      type: "blob",
      mimeType:
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    });

    // 导出下载word文件
    saveAs(out, "销售单.docx");
  });
};
</script>

导出得文件：

五、注意事项：

1. 该方法提供一个固定的word模板文件，数据通过参数替换的方式传入word文件中，灵活性较差，适用于简单的文件导出。
2. 创建的word模板路径一定要放对，不然会报错找不到文件。
3. 无法动态的合并单元格，只能在模板里面操作，可控性差一点。
4. word模板里面的字段跟数据里面的字段相对应，模板里面使用 {字段} 包裹。简单的数据我们可以使用{} + 变量名来实现简单的文本替换。

六、其他的方法：

根据html代码转换为word文件(推荐)，

请看这里：vue项目：纯前端实现Word文档导出功能，使用第三方库生成word表格 合并单元格 导出手写复杂表格，并百分百还原word表格，一文搞定前端表格导出为word。-CSDN博客