vue； docxtemplater库，根据模版替换占位符导出Word

<template>
  <div>
    <button @click="exportWord">根据模版替换占位符导出Word</button>
  </div>
</template>

<script>
import PizZip from 'pizzip'; //"pizzip": "^3.1.4",
import Docxtemplater from 'docxtemplater'; //"docxtemplater": "^3.34.3",

export default {
  name: 'ExportWord',
  methods: {
    async exportWord() {
      // 本地路径，可改为axios获取服务器文件，当前为[public-->template.docx]
      const template = await fetch('/template.docx').then((res) => res.arrayBuffer());
      const zip = new PizZip(template);
      // 设定占位符，默认为{}
      let options = {
        delimiters: {
          start: '${',
          end: '}'
        }
      };
      const doc = new Docxtemplater().loadZip(zip).setOptions(options);

      // 定义要替换的占位符变量
      const data = {
        ssss: '这是标题',
        checkbox63214: '这是内容',
        time98377: '2023-03-12',
        number47162: '2',
      };

      // 替换占位符
      doc.setData(data);
      doc.render();

      // 生成 Word 文件并下载
      const out = doc.getZip().generate({
        type: 'blob',
        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      });
      const fileName = '导出Word文件.docx';
      if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(out, fileName);
      } else {
        const url = window.URL.createObjectURL(out);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    },
  },
};
</script>

---

如果上述代码中，模版文件的获取方式要从服务器获取，可将上述代码获取文件部分修改为

<template>
  <div>
    <button @click="exportWord">根据模版替换占位符导出Word</button>
  </div>
</template>

<script>
import PizZip from 'pizzip'; //"pizzip": "^3.1.4",
import Docxtemplater from 'docxtemplater'; //"docxtemplater": "^3.34.3",
import axios from 'axios' ;

export default {
  name: 'ExportWord',
  data(){
    return{
      templateRes: undefined
    }
  },
  methods: {
    async exportWord() {
      // 1. 加载 Word 模板文件并将其转换为二进制格式  { responseType: 'arraybuffer' }没配置会导致文件损坏
      await axios.get('TOUR_URL', { responseType: 'arraybuffer' }).then(res=>{
        this.templateRes=res
      });
      const template = this.templateRes.data;
      const zip = new PizZip(template);
      // 设定占位符，默认为{}
      let options = {
        delimiters: {
          start: '${',
          end: '}'
        }
      };
      const doc = new Docxtemplater().loadZip(zip).setOptions(options);

      // 定义要替换的占位符变量
      const data = {
        ssss: '这是标题',
        checkbox63214: '这是内容',
        time98377: '2023-03-12',
        number47162: '2',
      };

      // 替换占位符
      doc.setData(data);
      doc.render();

      // 生成 Word 文件并下载
      const out = doc.getZip().generate({
        type: 'blob',
        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      });
      const fileName = '导出Word文件.docx';
      if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(out, fileName);
      } else {
        const url = window.URL.createObjectURL(out);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    },
  },
};
</script>

template.docx