js使用docxtemplater模板语法将表单数据插入到docx模板文件中,再将文件导出

docxtemplater文档地址：docxtemplater.com/docs/get-st…

1.设置模板文件需要插入的字段名,将文件放在public目录下(report.docx)

{
    // 普通字段
  declarationUnitLeader: {
    name: '',
    job: '',
    officeNumber: '',
    phone: ''
  },
    // 循环表格
  businessExperience: [
    {
      id: generateUUID(),
      startYear: '',
      startMonth: '',
      endYear: '',
      endMonth: '',
      unit: '',
      professionalField: ''
    }
  ],
      // 多选框组
  majorConstructions: [
      {
        name: '国家级“双高”建设专业（群）',
        checked: false
      },
      {
        name: '国家级特色专业',
        checked: false
      },
      {
        name: '省级“双高”建设专业（群）',
        checked: false
      },
      {
        name: '省级特色专业',
        checked: false
      },
      {
        name: '省级职业院校教师教学创新团队建设专业',
        checked: false
      },
      {
        name: '国家级职业教育“双师型”教师培训基地相关专业',
        checked: false
      },
      {
        name: '其他',
        checked: false
      }
  ],
  
  educationSituation: [
    {
      key: '教学成果奖、教材建设奖等获奖情况',
      list: [
        {
          id: generateUUID(),
          year: '',
          projectName: '',
          leaderName: '',
          projectLevel: '',
          awardingDepartment: ''
        }
      ]
    },
    {
      key: '参加和指导学生参加技能大赛等获奖情况',
      list: [
        {
          id: generateUUID(),
          year: '',
          projectName: '',
          leaderName: '',
          projectLevel: '',
          awardingDepartment: ''
        }
      ]
    },
    {
      key: '教材、资源库、在线精品课程建设等参与情况',
      list: [
        {
          id: generateUUID(),
          year: '',
          projectName: '',
          leaderName: '',
          projectLevel: '',
          awardingDepartment: ''
        }
      ]
    }
  ],
}

2.获取静态资源中的模版文件

1.使用fetch API或者jszip-utils/browserify-fs等三方插件获取本地模板文件,将其转为二进制流

3.使用docxtemplater等三方插件将数据插入模板文件,生成新的文件

4.使用file-saver等插件将文件下载

例:使用jszip-utils,pizzip,docxtemplater,file-saver插件实现

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

const exportWord = () => {
  JSZipUtils.getBinaryContent(`/report.docx`, (error, content) => {
    console.log(error, content)
    // 抛出异常
    if (error) {
      throw error
    }
    // 创建一个PizZip实例，内容为模板的内容
    const zip = new JSZip(content)
    // 创建并加载docxtemplater实例对象
    const doc = new Docxtemplater().loadZip(zip)
    // 设置模板变量的值
    doc.setData({
      name: 'application/vnd.openxmlformats-officedocument.wordprocessingml.documentapplication/vnd.openxmlformats-officedocument.wordprocessingml.documentapplication/vnd.openxmlformats-officedocument.wordprocessingml.document',
      phone: '18438610573',
      ...reportJson.value // 字段对象
    })
    try {
      // 用模板变量的值替换所有模板变量
      doc.render()
    } catch (error) {
      // 抛出异常
      const e = {
        message: error.message,
        name: error.name,
        stack: error.stack,
        properties: error.properties
      }
      console.log(JSON.stringify({ error: e }))
      throw error
    }

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