在Vue中导出文件格式为word

前段时间，遇到一个功能，前段将填写的数据，按模板导出到word文件。现在，在这里记录一下自己的使用心得。

这里主要用到了docxtemplater, pizzip, jszip-utils, file-saver四个插件。

所以首先先安装对应插件：

npm i docxtemplater pizzip jszip-utils file-saver -S

安装后的版本是：

在安装的同时，我们在public目录（vue-cli3.0构建的项目）放下我们要导出的模板文件。

我这里是将其命名world-export.docx(这里单拼写有误，将word写成了world为了与后面的图片内容保持一致，将先保持这样吧),并将其放在docxs目录下，如图所示：

安装好后，为了保证后续功能的复用性，将该功能封装为一个mixin,取名export-world.js。

具体逻辑：

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

export default {
  methods: {
    // 点击导出word
    exportWord(
      data,
      docTitle = '内部质量保证体系行政管理人员自我诊断与改进登记表'
    ) {
      // let that = this;
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent('/docxs/world-export.docx', function(
        error,
        content
      ) {
        // model.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error
        }

        // 创建一个PizZip实例，内容为模板的内容
        const zip = new PizZip(content)
        // 创建并加载docxtemplater实例对象
        // eslint-disable-next-line new-cap
        const doc = new docxtemplater().loadZip(zip)
        // 设置模板变量的值
        doc.setData({
          ...data
        })

        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'
        })
        // 将目标文件对象保存为目标类型的文件，并命名，这里可以使用.doc,也可以使用.docx，但.doc兼容性也好一些，所以就采用了.doc
        saveAs(out, `${docTitle}.doc`)
      })
    }
  }
}

然后在其他地方需要的地方引入：

import exportWordMixin from '@/mixins/export-word'
import { queryFillInfoList, commitFillInfo, queryFillInfo } from '@/api'
import { filterHTMLTag } from '@/utils'
import moment from 'moment'

export default {
	//此处省略一万字...
	mixins: [exportWordMixin],
	methods: {
  	async getFillInfo() {
      const { data } = await queryFillInfo({
        levelTimeX: this.personalDiagnosis.formInline.levelTimeX,
        levelId: this.levelId,
        id: this.currentFillId
      }) || { data: {}}
      return data
    },
    async handleExport(row) {
      this.currentFillId = row.id
      this.levelId = row.levelId
      // 获取需要填充的数据
      const data = await this.getFillInfo()
      for (const key in data) {
        // 去除字符串中的html标签
        data[key] = filterHTMLTag(data[key])
        if (key === 'createDate') {
          // 日期格式化
          data[key] = data[key] && moment(data[key]).format('YYYY-MM-DD')
        }
        if (key === 'sunup') {
          // 处理标题的显示
          data[key] = data[key] && data[key].replace(/\d+/g, value => value + '学年 ')
        }
        if (key === 'selfDiagnosisImprove' && data[key].length > 0) {
          const selfDiagnosisImprove = data[key]
          data.table = selfDiagnosisImprove
          selfDiagnosisImprove.forEach(item => {
            for (const k in item) {
              item[k] = filterHTMLTag(item[k])
              item[k] = item[k] ? item[k] : ''
            }
          })
        }
      }
      // 在export-word.js对应mixin文件中
      this.exportWord(data)
    },
	}
}

导出效果如下：