前端vue以模板方式导出word----依赖 docxtemplater

<template>
  <div class="approvalNo-or-opinionNo-list">
    <el-button type="primary" size="small" @click="exportWord">点击下载</el-button>
    <div id="pdfDom">
      <table cellspacing="0">
        <caption>
          伦理审查批件
        </caption>
        <tr>
          <td class="key-name">批件号</td>
          <td colspan="3">{{ approvalNoOrOpinionNoList.approvalNo }}</td>
        </tr>
        <tr>
          <td class="key-name">项目名称</td>
          <td colspan="3">{{ approvalNoOrOpinionNoList.projectName }}</td>
        </tr>
        <tr>
          <td class="key-name">项目来源</td>
          <td colspan="3">{{ approvalNoOrOpinionNoList.sponsorName }}</td>
        </tr>
        <tr>
          <td class="key-name">研究单位</td>
          <td colspan="3">{{ approvalNoOrOpinionNoList.researchUnit }}</td>
        </tr>
        <tr>
          <td class="key-name">主要研究者</td>
          <td colspan="3">{{ approvalNoOrOpinionNoList.personName }}</td>
        </tr>
        <tr>
          <td class="key-name">审查类别</td>
          <td>{{ approvalNoOrOpinionNoList.taskStyle }}</td>
          <td class="key-name">审查方式</td>
          <td>{{ approvalNoOrOpinionNoList.taskType }}</td>
        </tr>
        <tr>
          <td class="key-name">审查日期</td>
          <td>{{ approvalNoOrOpinionNoList.auditDate }}</td>
          <td class="key-name">审查地点</td>
          <td>{{ approvalNoOrOpinionNoList.auditAddress }}</td>
        </tr>
        <tr>
          <td class="key-name">审查委员</td>
          <td colspan="3">{{ approvalNoOrOpinionNoList.auditCommittees }}</td>
        </tr>
        <tr>
          <td class="key-name">批准文件</td>
          <td colspan="3">见附件</td>
        </tr>
        <tr>
          <td colspan="4" class="options">
            {{ approvalNoOrOpinionNoList.auditRemark }}
          </td>
        </tr>
        <tr>
          <td class="key-name">年度/定期<br />跟踪审查频率</td>
          <td colspan="3">{{ approvalNoOrOpinionNoList.frequency }}</td>
        </tr>
        <tr>
          <td class="key-name">有效期</td>
          <td colspan="3">{{ approvalNoOrOpinionNoList.effectiveStartDate }} 至 {{ approvalNoOrOpinionNoList.effectiveEndDate }}</td>
        </tr>
        <tr>
          <td class="key-name">联系人与联系电话</td>
          <td colspan="3">{{ approvalNoOrOpinionNoList.sponsorContacts }} {{ approvalNoOrOpinionNoList.sponsorTel }}</td>
        </tr>
        <tr>
          <td class="key-name">伦理委员会</td>
          <td colspan="3">{{ approvalNoOrOpinionNoList.ethicsCommittee }}</td>
        </tr>
        <tr>
          <td class="key-name">主任签名</td>
          <td colspan="3">{{ approvalNoOrOpinionNoList.directorAutograph }}</td>
        </tr>
        <tr>
          <td class="key-name">日期</td>
          <td colspan="3">{{ approvalNoOrOpinionNoList.todayDate }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import docxtemplater from 'docxtemplater'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
import JSZip from 'jszip'
export default {
  data() {
    return {}
  },
  props: {
    approvalNoOrOpinionNoList: {
      type: Object,
      default: {}
    }
  },
  methods: {
    exportWord: function() {
      let _this = this
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent('approvalNo.docx', function(error, content) {
        if (error) throw error // 抛出异常
        let zip = new JSZip(content) // 创建一个JSZip实例，内容为模板的内容
        let doc = new docxtemplater().loadZip(zip) // 创建并加载docxtemplater实例对象
        doc.setData({ ..._this.approvalNoOrOpinionNoList }) // 设置模板变量的值
        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, 'aaa.docx')
      })
    }
  }
}
</script>
<style lang="scss">
.approvalNo-or-opinionNo-list {
  height: 350px;
  overflow-y: auto;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
  > #pdfDom {
    table {
      text-align: center;
      border-bottom: 1px solid #ccc;
       93%;
      margin: 0 auto;
      font-family: '楷体', '楷体_GB2312';
      caption {
        font-size: 16px;
        text-align: center;
        line-height: 46px;
        color: #333;
        font-weight: bold;
      }
      td {
         25%;
        height: 32px;
        color: #666;
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        padding: 0 6px;
      }
      td:last-child {
        border-right: 1px solid #ccc;
      }
      .key-name {
        color: #333;
        font-weight: 600;
      }
      .options {
        padding: 10px;
        text-align: justify;
        text-indent: 2em;
      }
    }
  }
}
</style>