Vue+ElementPlus导出word文档

一、需要用到以下插件：

-- 安装 docxtemplater
npm install docxtemplater pizzip  --save

-- 安装 jszip-utils
npm install jszip-utils --save 

-- 安装 jszip
npm install jszip --save

-- 安装 FileSaver
npm install file-saver --save

二、引入到页面内

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'

三、前端部分，主要用到elementplus部分组件，界面如下：

四、需要准备一个word模板文件（按自己所需格式），放到项目public文件夹下，如图所示：

 需要填写的部分都被定义为变量，

 单一变量格式如下：

{why}

  json格式如下：

{#things}
    {time}-{thing}
{/things}

  前端与之对应 ，如下：

 wordData: {
      title: '请假申请表',
      name:'小张',
      age:'28',
      "things": [
        { time :"2022-4-1",thing: "在家"},
        { time :"2022-4-2",thing: "上班"},
      ]
},

 五，完整代码如下：

<template>
  <div class="home-css">
    <el-button style="margin: 20px" type="success" size="large" @click="out">导出申请表</el-button>
    <el-card class="el-card-css">
      <div style="display: flex;align-items: center;margin-top: 20px">
        <span>部门:</span>
        <el-input v-model="organ" placeholder="" clearable class="input"/>
        <span>姓名:</span>
        <el-input v-model="name" placeholder="" clearable class="input" />
        <span>性别:</span>
        <el-input v-model="gender" placeholder="" clearable class="input" />
      </div>
      <div style="display: flex;align-items: center;margin-top: 20px">
        <span>年龄:</span>
        <el-input v-model="age" placeholder="" clearable class="input" />
        <span>天数:</span>
        <el-input v-model="days" placeholder="" clearable class="input" />
        <span>职务:</span>
        <el-input v-model="worker" placeholder="" clearable class="input" />
      </div>

      <div style="display: flex;align-items: center;margin-top: 20px">
        <span>时间:</span>
        <el-input v-model="date" placeholder="" clearable class="input" />
      </div>

      <div style="display: flex;align-items: center;margin-top: 20px">
        <span>理由:</span>
        <el-input
            v-model="why"
            maxlength="90"
            show-word-limit
            type="textarea"
            style="width: 500px; margin-left: 20px"
        />
      </div>
    </el-card>
  </div>
</template>

<script>

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'

export default {
  name: "Devicemanage",
  data(){
    return{
      organ:'',
      name:'',
      gender:'',
      age:'',
      days:'',
      worker:'',
      date:'',
      why:'',

      wordData: {
        title:'请假审批表',
        organ:'',
        name:'',
        gender:'',
        age:'',
        days:'',
        worker:'',
        date:'',
        why:'',
      },

    }
  },
  methods:{
    //导出word文件
    out() {
      //将Input框输入的内容一一对应到模板数据wordData当中
      this.wordData.organ=this.organ;
      this.wordData.name=this.name;
      this.wordData.gender=this.gender;
      this.wordData.age=this.age;
      this.wordData.days=this.days;
      this.wordData.worker=this.worker;
      this.wordData.date=this.date;
      this.wordData.why=this.why;

      let that = this;
      //模板文件的位置,放到public下面
      let wordsrc = "/请假审批表.docx";
      //导出文件的名字
      let wordname = "请假审批表.docx";
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(wordsrc, function(error, content) {
        //  wordsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error;
        }

        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docx templater实例对象
        let doc = new docxtemplater().loadZip(zip);
        // 设置模板变量的值
        doc.setData({
          ... that.wordData, // worddata中的数据可以再模板中直接使用
        });

        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (error) {
          // 抛出异常
          let e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
          };
          console.log(JSON.stringify({ error: e }));
          throw error;
        }

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


  }
}
</script>

<style scoped>
.home-css{
  background-color: #f1f1f9;
  min-height: calc(100vh - 60px - 50px);
}
.el-card-css{
  width: 50%;
  height: 300px;
  margin-right: 20px;
  align-items: center;
  margin-left: 20px;
}
.input{
  width: 200px;
  margin-right: 50px;
  margin-left: 20px
}
</style>