前端将数据写入word文件，并能进行导出

需求场景:将音频中的对话内容(已识别，并以数组的格式返到前端)写入到word中，并能进行导出 所用技术:nuxt、docxtemplater@3.29.1、pizzip@3.1.1

docxtemplater怎么用，我也是度娘巴拉来的，自己找去吧，我的需求只要求导出为word，所以只找了适合需求的内容，别的没看，哈哈哈

测试结果:

测试word模板:

代码: 在utils中创建exportWord.js

function getFileBinaryString(template) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => {
            resolve(e.target.result);
        }
        reader.onerror = reject;
        reader.readAsBinaryString(template)

    });
}

export async function generateDocxFile(template, fileData) {
    return new Promise((resolve) => {
        getFileBinaryString(template)
            .then(templateData => {
                const zip = new PizZip(templateData);
                const doc = new DocxTemplater()
                    .loadZip(zip)
                    .render(fileData)
                const out = doc.getZip().generate({
                    type: 'blob',
                    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                });
                resolve(out);
            })
            .catch((e) => {
                console.log("报错了", e);
            });
    });
} 

在.vue文件中:

<template>
  <a-button
    type="primary"
    size="small"
    class="exportButton"
    @click="exportButton()"
    >导出</a-button
  >
</template>

<script>
import { generateDocxFile } from "../utils/dataToWord";
import saveAs from "file-saver";
export default {
  name: "IndexPage",
  methods: {
    async exportButton() {
      const path = "/template.docx";
      const params = {
        content: {
          title: "会议纪要",
          speakerList: [
            {
              speaker: "用户-1",
              text: "早上好",
            },
            {
              speaker: "用户-2",
              text: "吃饭了么？",
            },
          ],
        },
      };
      let title = "";
      //将文件转为file对象
      fetch(path)
        .then((response) => response.blob())
        .then(async (blob) => {
          const file = new File([blob], "template.docx");
          const out = await generateDocxFile(file, params);
          saveAs(out, title + ".docx");
        });
    },
  },
};
</script>

在测试过程中出现的问题：

我这个报错是因为我引入的文件路径不对，所以报这个错。

这个报错是因为模板结构不对，一定要检查一下结构哦，特别是if判断或者循环，一定要有结束标志！