vue导出word模版文档

下载依赖及相关版本号

npm install XXX@版本号

"pizzip": "^3.0.6",
"docxtemplater": "^3.22.1",
"file-saver": "^2.0.2",
"jszip-utils": "^0.1.0",

引用

import Docxtemplater from 'docxtemplater';
import { saveAs } from 'file-saver';
// import JSZip from 'jszip';
import PizZip from 'pizzip';
import JSZipUtils from 'jszip-utils';

方法：

// 导出word
    handleExport() {
      if (this.currentRow) {
        let processList = []
        let res = 执行接口 返回的数据
        if (res && res.code === 200 && res.data && res.data.length) {
          for(let i = 0; i < res.data.length; i++) {
            let process = {
              // 处理人
              dutyMan: res.data[i].dutyMan || '',
              // 联系手机
              dutyManTel: res.data[i].dutyManTel || '',
              // 处理时间
              finishDate: this.timeFormat(res.data[i].finishDate) || '',
              // 处理状态
              eventStatus: res.data[i].eventStatus || '',
              // 处理描述
              processReason: res.data[i].processReason || ''
            }
            processList.push(process);
          }
        }
        let date = new Date();
        let exportInfo = {
          eventTitle: this.currentRow.eventTitle || '',
          gridName: this.currentRow.gridName || '',
          eventType: '突发事件',
          // 事件类别
          eventTypeName: this.currentRow.eventTypeName || '',
          // 发生时间
          occurDate: this.currentRow.occurDate || '',
          // 上报时间
          reportDate: this.currentRow.reportDate || '',
          // 上报人
          reportName: this.currentRow.reportName || '',
          // 上报人Tel
          reportTel: this.currentRow.reportTel || '',
          // 办理时限
          planEndDate: this.currentRow.planEndDate || '',
          // 事件来源
          eventSource: this.currentRow.eventSource || '',
          // 事件发生地址
          eventDetailAddress: this.currentRow.eventDetailAddress || '',
          // 事件描述
          eventDesc: this.currentRow.eventDesc || '',
          // 事件等级
          eventLevel: this.currentRow.eventLevel || '',
          unitName: this.$store.state.user.currentUser.unitName,
          curYear: date.getFullYear(),
          curMonth: date.getMonth() + 1,
          curDay: date.getDate(),
          // 单号
          number: date.getTime()
        }
        // 导出
        this.downloadprice(exportInfo, processList)
      } else {
        this.$message({
          type: 'info',
          message: '请选择一条记录'
        })
      }
    },
    // 下载事件
    downloadprice(exportInfo, processList) {
      // 读取并获得模板文件的二进制内容
      let docxsrc = "../../../../../static/file/world.docx"; // 模板文件的位置
      JSZipUtils.getBinaryContent(docxsrc + '?random=' + Math.random(), function(error, content) {
        // world.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error;
        }
        // 创建一个JSZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new Docxtemplater();
        doc.loadZip(zip);
        // 设置模板变量的值
        doc.setData({
          // 基本信息
          ...exportInfo,
          // 流程列表信息
          processList: processList
        });
        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (error) {
          // 抛出异常
          // eslint-disable-next-line no-unused-vars
          let e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
          };
          throw error;
        }
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
          type: 'blob',
          mimeType:
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, '事件移交单.docx');
      });
    },

word模板且必须是.docx，不能是.doc
docxtemplater 不支持jszip，会有报错，因此要使用PizZip
模板的路径要写正确，不然会报错找不到文件

{#processList}处理人：{dutyMan}      联系手机：{dutyManTel}      处理时间：{finishDate}      处理状态：{eventStatus}      处理描述：{processReason}
{/processList}

注意此处{#processList} .....{/processList}，processList 是我们的列表数据，{#XXX}...{/XXX} 表示循环，{dutyMan}，{dutyManTel}等是processList中的字段名称

// 不是对象类型
"products": ["Windows","Mac OSX","Ubuntu"]
// 模板文件中应该这样设置
{#products} {.} {/products}

更多参考：
https://www.jianshu.com/p/b3622d6f8d98