element-ui框架下通过docxtemplater插件导出word文件

业务需求——vue前端页面通过预先写好的word生成对应带数据的文件

预先写好的word

生成的带数据word文档

docxtemplater 简介

docxtemplater 使用 JSON 数据格式作为输入，可以处理docx 和 ppt模板。不像一些其它的工具，比如 docx.js, docx4j, python-docx 等，需要自己编写代码来生成文件，docxtemplater只需要用户通过标签的形式编写模板，就可以生成文件

使用教程

安装依赖

项目所需依赖：docxtemplater，jszip，jszip-utils，pizzip，file-saver。

1、docxtemplater：这个插件可以通过预先写好的word，excel等文件模板生成对应带数据的文件

2、pizzip：这个插件用来创建，读取或编辑.zip的文件（同步的，还有一个插件是jszip，异步的）

3、jszip-utils：与jszip/pizzip一起使用，jszip-utils 提供一个getBinaryContent(path, data)接口，path即是文件的路径，支持AJAX get请求，data为读取的文件内容。

4、file-saver：适合在客户端生成文件的工具，它提供的接口saveAs(blob, “1.docx”)将会使用到，方便我们保存文件。

5、docxtemplater-image-module-free：需要导出图片的话需要这个插件

npm 安装如下：

npm install  docxtemplater pizzip --save  // 处理docx模板
npm install  jszip-utils --save
npm install  jszip --save   
npm install  file-saver --save  // 处理输出文件

创建word模板文件

创建word模板：public/demo.docx
vue cli3/vue cli4 在 public 文件下存放word模板demo.docx;
vue cli2 在static文件下存放word模板demo.docx;

具体代码如下：

<template>
    <div>
      <el-dialog
        title="确认生成合同"
        :close-on-click-modal="true"
        style="margin-top: -12vh"
        width="60%"
        v-loading="confirmLoading"
        :close="close"
        :visible.sync="dialogFormVisible">
        <div >
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
            <el-form-item label="受托单位" prop="entrustedName">
              <el-input v-model="form.entrustedName" />
            </el-form-item>
            <el-form-item label="受托单位地址" prop="entrustedAddress">
              <el-input v-model="form.entrustedAddress" />
            </el-form-item>
            <el-form-item label="受托单位电话" prop="entrustedTel">
              <el-input v-model="form.entrustedTel" />
            </el-form-item>
            <el-form-item label="开户行" prop="bankName">
              <el-input v-model="form.bankName" />
            </el-form-item>
            <el-form-item label="账户户名" prop="accountName">
              <el-input v-model="form.accountName" />
            </el-form-item>
            <el-form-item label="账号" prop="accountCode">
              <el-input v-model="form.accountCode" />
            </el-form-item>
            <el-form-item label="实收检测金额" prop="realPrice">
              <el-input v-model="form.realPrice" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: right;margin-top:10px;">
            <el-button type="primary" @click="handleAccept">生成合同</el-button>
            <el-button @click="dialogFormVisible = false">关 闭</el-button>
          </div>
        </div>
      </el-dialog>

    </div>
</template>

<script>
  import {doEditContract} from '@/api/baseOrderMaterial'
  import docxtemplater from 'docxtemplater'
  import PizZip from 'pizzip'
  import JSZipUtils from 'jszip-utils'
  import {saveAs} from 'file-saver'

    export default {
      name: "ConfirmOrderReagentModal",
      description:'生成合同',

      data(){
        return {
          form:{
            id:'123',
          },
        }
      },
      methods:{
        //确认受理
         handleAccept(){
           const that = this
           this.$refs['form'].validate(async (valid) => {
             if (valid) {
               this.$baseConfirm('请仔细核对合同信息\n确认生成合同吗?','确认生成',async ()=>{
                 that.confirmLoading = true
                 that.form.orderId = that.currOrder.id
                 that.form.realOrganId = that.realOrganId
                 that.form.isSelf = that.isSelf
                 console.log("that.form",that.form)
                 const {success,result} = await doEditContract(that.form)
                 console.log("wordResult--------",result)
                 if(success){
                   let _this = this;
                   // 读取并获得模板文件的二进制内容
                   JSZipUtils.getBinaryContent("demo.docx", function(error, content) {
                     // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
                     // 抛出异常
                     if (error) {
                       throw error;
                     }

                     // 创建一个JSZip实例，内容为模板的内容
                     let zip = new PizZip(content);
                     // 创建并加载docxtemplater实例对象
                     let doc = new docxtemplater().loadZip(zip);
                     // 设置模板变量的值
                     doc.setData({
                       ...result,
                     });

                     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"
                     });
                     // 将目标文件对象保存为目标类型的文件，并命名

                     let filename = "销售合同.docx"
                     saveAs(out, filename);
                   });
                   that.close()
                   that.$emit('ok')
                 }else{
                   that.$baseMessage(message, 'error')
                 }

               });
             }
           })
        },
        //-----------------------------------end------------------------------
        changeRadio(e){
          if(e===0){
            this.isSelf = 0
            this.loadManageInfo()
          }else if(e===1){
            this.form = {
              entrustedName: this.selTestOrgan.enterpriceName,
              entrustedAddress : this.selTestOrgan.enterpriceAddress,
              entrustedTel : this.selTestOrgan.linkTel,
              bankName : this.selTestOrgan.bankName,
              accountName : this.selTestOrgan.accountName,
              accountCode : this.selTestOrgan.accountCode,
              realPrice : this.currOrder.orderPrice,
              searchDate:this.currOrder.searchDate
            }
            this.isSelf = 1

          }
        }
      }
    }
</script>
<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

doc.setData({
 ...result,
});

后台封装数据集格式如下：