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

原创

已于 2023-03-13 16:23:42 修改 · 1.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-03-13 09:11:01 首次发布

这段代码展示了如何在Vue.js应用中使用Docxtemplater库，结合Pizzip处理从服务器获取的Word模板，通过axios获取模板文件，替换占位符并生成可下载的定制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