前端vue导出为word文件

导出内容：

安装依赖

npm install docxtemplater pizzip  --save
npm install jszip-utils --save
npm install jszip --save
npm install file-saver --save

导出word文件模板

文件放置在  public  下即可

导出文件

代码模板

<template>
  <div style="margin: 50px">
    <el-table :data="course" border style="width: 80%">
      <el-table-column prop="orderType" label="商机类型"> </el-table-column>
      <el-table-column prop="eggSize" label="鸡蛋码数"> </el-table-column>
      <el-table-column prop="eggCategoryCode" label="蛋品品类">
      </el-table-column>
    </el-table>
    <el-button @click.stop="exportWord" type="primary" size="small"
      >导出</el-button
    >
  </div>
</template>
<script>
import JSZipUtils from "jszip-utils";
import JSZip from "pizzip";
import Docxtemplater from "docxtemplater";
import { saveAs } from "file-saver";
export default {
  data() {
    return {
      course: [
        {
          orderType: "需求端",
          eggSize: "25",
          eggCategoryCode: "粉壳蛋",
        },
        {
          orderType: "供应端",
          eggSize: "41",
          eggCategoryCode: "红壳蛋",
        },
        {
          orderType: "需求端",
          eggSize: "38",
          eggCategoryCode: "绿壳蛋",
        },
      ],
    };
  },

  methods: {
    exportWord() {
      let course = this.course;

      JSZipUtils.getBinaryContent("export.docx", function (error, content) {
        // 抛出异常
        if (error) {
          throw error;
        }
        // 创建一个JSZip实例，内容为模板的内容
        let zip = new JSZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new Docxtemplater().loadZip(zip);
        // 设置模板变量的值
        doc.setData({
          course,
        });
        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (error) {
          // 抛出异常
          // let e = {
          //   message: error.message,
          //   name: error.name,
          //   stack: error.stack,
          //   properties: error.properties,
          // }
          this.$message.error("导出报表失败");
          throw error;
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, "测试.docx");
      });
    },
  },
};
</script>