docxtemplater、pizzip、jszip-utils、file-saver 前端实现导出word

一、准备工作

1、插件安装：

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

2、安装完成：

3、导出的模板文件。

我这里是将其命名word-export.docx,并将其放在public/docxs目录下，如图所示：

二、实现代码

页面使用：

<template>
  <div>
    <el-button type="primary" size="mini" @click="exportWord">导出word</el-button>
    <div style="margin: 20px 10px; width: 500px">
        使用 JSON 数据格式作为输入，可以处理docx 和 ppt模板。不像一些其它的工具，比如 docx.js, docx4j, python-docx 等，需要自己编写代码来生成文件，docxtemplater只需要用户通过标签的形式编写模板，就可以生成文件。
    </div>
  </div>
</template>
<script>
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'

export default {
  data() {
    return {}
  },
  mounted() {},
  methods: {
    // 导出word
    exportWord() {
      const docTitle = "测试报表"
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent('./docxs/word-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({
          year: '2022',
          month: '05',
          JSON: 'json',
          ex: 'docx.js, docx4j, python-docx'
        })

        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`)
      })
    }
  }
}
</script>

方法封装：

将该功能封装为一个mixin,取名export-word.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'

export default {
  mixins: [exportWordMixin],
  data() {
    return {}
  },
  mounted() {},
  methods: {
	const data = {
	  year: '2022',
      month: '05',
      JSON: 'json',
      ex: 'docx.js, docx4j, python-docx'
	}
	this.exportWord(data);
  }
}

导出效果：