Skip to content

具体 api 请查阅docxtemplater 官网网站 参考依赖:

js
"docxtemplater": "^3.31.2",
"docxtemplater-image-module-free": "^1.1.1",
"echarts": "^4.9.0",
"file-saver": "^2.0.5",
"jszip-utils": "^0.1.0",
"pizzip": "^3.1.1",

注意事项:

  • 注意 file-saver 与 docxtemplater 版本对应关系
  • 需要 word 创建模板文件
  • word 模板后缀可为 doc/docx
  • word 导出样式在 word 模板里进行设置(字体,加粗等)
  • 需要导出图片的需要使用到 docxtemplater-image-module-free 模块

代码示例:

vue
<template>
  <div>
    <button @click="exportWord">导出 Word</button>
  </div>
</template>

<script>
import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";

export default {
  data() {
    return {
      // 模拟数据,用于填充 Word 模板
      exportData: {
        name: "张三",
        items: [
          { name: "项目1", description: "描述1", colspan: 2, rowspan: 1 },
          { name: "项目2", description: "描述2", colspan: 1, rowspan: 2 },
        ],
      },
    };
  },
  methods: {
    exportWord() {
      // 指定模板文件路径(放在 public 文件夹中)
      //注意(vue2/public,vue3/static),如果有qiankun主子应用,请把word模板放在主应用public下
      const templatePath = "/template.docx";
      // 指定导出的文件名
      const fileName = "output.docx";

      // 使用 JSZipUtils 加载模板文件
      JSZipUtils.getBinaryContent(templatePath, (error, content) => {
        if (error) {
          throw error;
        }

        // 创建 PizZip 实例
        const zip = new PizZip(content);
        // 创建 docxtemplater 实例
        const doc = new docxtemplater().loadZip(zip);

        // 设置数据到模板
        doc.setData(this.exportData);

        try {
          // 渲染模板
          doc.render();
        } catch (error) {
          const e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties,
          };
          console.error(JSON.stringify({ error: e }));
          throw error;
        }

        // 生成 Word 文件
        const out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });

        // 保存文件
        saveAs(out, fileName);
      });
    },
  },
};
</script>

<style scoped>
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

合并单元格

掘金链接

//数据需要组成:
let data = [
{name:'xiaochen',
list:[
  {'unit':'chinese',score:90},
  {'unit':'math',score:80},
]}
]

模板 注意,这里右边的表格{#list}{unit}这行是插入的

结果