element-ui框架下通过docxtemplater插件导出word文件
业务需求——vue前端页面通过预先写好的word生成对应带数据的文件
预先写好的word
生成的带数据word文档
docxtemplater 简介
docxtemplater 使用 JSON 数据格式作为输入，可以处理docx 和 ppt模板。不像一些其它的工具，比如 docx.js, docx4j, python-docx 等，需要自己编写代码来生成文件，docxtemplater只需要用户通过标签的形式编写模板，就可以生成文件
使用教程
安装依赖
项目所需依赖：docxtemplater，jszip，jszip-utils，pizzip，file-saver。
1、docxtemplater：这个插件可以通过预先写好的word，excel等文件模板生成对应带数据的文件
2、pizzip：这个插件用来创建，读取或编辑.zip的文件（同步的，还有一个插件是jszip，异步的）
3、jszip-utils：与jszip/pizzip一起使用，jszip-utils 提供一个getBinaryContent(path, data)接口，path即是文件的路径，支持AJAX get请求，data为读取的文件内容。
4、file-saver：适合在客户端生成文件的工具，它提供的接口saveAs(blob, “1.docx”)将会使用到，方便我们保存文件。
5、docxtemplater-image-module-free：需要导出图片的话需要这个插件
npm 安装如下：
npm install docxtemplater pizzip --save // 处理docx模板
npm install jszip-utils --save
npm install jszip --save
npm install file-saver --save // 处理输出文件
创建word模板文件
创建word模板：public/demo.docx
vue cli3/vue cli4 在 public 文件下存放word模板demo.docx;
vue cli2 在static文件下存放word模板demo.docx;
具体代码如下：
<template>
<div>
<el-dialog
title="确认生成合同"
:close-on-click-modal="true"
style="margin-top: -12vh"
width="60%"
v-loading="confirmLoading"
:close="close"
:visible.sync="dialogFormVisible">
<div >
<el-form ref="form" :model="form" :rules="rules" label-width="150px">
<el-form-item label="受托单位" prop="entrustedName">
<el-input v-model="form.entrustedName" />
el-form-item>
<el-form-item label="受托单位地址" prop="entrustedAddress">
<el-input v-model="form.entrustedAddress" />
el-form-item>
<el-form-item label="受托单位电话" prop="entrustedTel">
<el-input v-model="form.entrustedTel" />
el-form-item>
<el-form-item label="开户行" prop="bankName">
<el-input v-model="form.bankName" />
el-form-item>
<el-form-item label="账户户名" prop="accountName">
<el-input v-model="form.accountName" />
el-form-item>
<el-form-item label="账号" prop="accountCode">
<el-input v-model="form.accountCode" />
el-form-item>
<el-form-item label="实收检测金额" prop="realPrice">
<el-input v-model="form.realPrice" />
el-form-item>
el-form>
<div slot="footer" class="dialog-footer" style="text-align: right;margin-top:10px;">
<el-button type="primary" @click="handleAccept">生成合同el-button>
<el-button @click="dialogFormVisible = false">关 闭el-button>
div>
div>
el-dialog>
div>
template>
<script>
import {doEditContract} from '@/api/baseOrderMaterial'
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'
export default {
name: "ConfirmOrderReagentModal",
description:'生成合同',
data(){
return {
form:{
id:'123',
},
}
},
methods:{
//确认受理
handleAccept(){
const that = this
this.$refs['form'].validate(async (valid) => {
if (valid) {
this.$baseConfirm('请仔细核对合同信息\n确认生成合同吗?','确认生成',async ()=>{
that.confirmLoading = true
that.form.orderId = that.currOrder.id
that.form.realOrganId = that.realOrganId
that.form.isSelf = that.isSelf
console.log("that.form",that.form)
const {success,result} = await doEditContract(that.form)
console.log("wordResult--------",result)
if(success){
let _this = this;
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent("demo.docx", function(error, content) {
// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error;
}
// 创建一个JSZip实例，内容为模板的内容
let zip = new PizZip(content);
// 创建并加载docxtemplater实例对象
let doc = new docxtemplater().loadZip(zip);
// 设置模板变量的值
doc.setData({
...result,
});
try {
// 用模板变量的值替换所有模板变量
doc.render();
} catch (error) {
// 抛出异常
let e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties
};
console.log(JSON.stringify({ error: e }));
throw error;
}
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
let out = doc.getZip().generate({
type: "blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
// 将目标文件对象保存为目标类型的文件，并命名
let filename = "销售合同.docx"
saveAs(out, filename);
});
that.close()
that.$emit('ok')
}else{
that.$baseMessage(message, 'error')
}
});
}
})
},
//-----------------------------------end------------------------------
changeRadio(e){
if(e===0){
this.isSelf = 0
this.loadManageInfo()
}else if(e===1){
this.form = {
entrustedName: this.selTestOrgan.enterpriceName,
entrustedAddress : this.selTestOrgan.enterpriceAddress,
entrustedTel : this.selTestOrgan.linkTel,
bankName : this.selTestOrgan.bankName,
accountName : this.selTestOrgan.accountName,
accountCode : this.selTestOrgan.accountCode,
realPrice : this.currOrder.orderPrice,
searchDate:this.currOrder.searchDate
}
this.isSelf = 1
}
}
}
}
script>
<style scoped>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
style>
doc.setData({
...result,
});
后台封装数据集格式如下：
