一、准备工作

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: {// 导出wordexportWord() {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-capconst 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兼容性也好一些，所以就采用了.docsaveAs(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: {// 点击导出wordexportWord(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-capconst 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兼容性也好一些，所以就采用了.docsaveAs(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);}
}

导出效果：