一、需要的js依赖
实现此功能需要使用到docxtemplater、jszip-utils、jszip、FileSaver等js文件
1、docxtemplater
介绍
docxtemplater是一种邮件合并工具，它以编程方式使用，处理条件、循环，并且可以扩展为表格、HTML、图像等。
参考链接：https://docxtemplater.readthedocs.io/en/latest/index.html
用到的API
- new window.docxtemplater：
创建docxtemplater实例对象，返回一个新的docxtemplater对象 - loadZip(zip)：
docxtemplater对象加载zip实例
注意：必须从jszip的2.x版本向该方法传递一个zip实例 - setData(Tags):
设置模板变量的值 - render()：
此函数用模板变量的值替换所有模板变量 - getZip()：
此函数返回代表docxtemplater对象的zip
2、jszip-utils
介绍
jszip-utils是与jszip一起使用的跨浏览器的工具库
参考链接：https://stuk.github.io/jszip-utils/
用到的API
- getBinaryContent()：
读取并获得模板文件的二进制内容
3、jszip
介绍
jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，且API的使用也很简单。
参考链接：https://stuk.github.io/jszip/
用到的API
- new JSZip()：
创建一个JSZip实例 - generate()：
此函数可以生成一个zip文件（不是一个真实的文件，而是在内存中的表示）
4、FileSaver
介绍
FileSaver.js 是在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的应用。
参考链接：
https://www.cnblogs.com/yunser/p/7629399.html
https://www.npmjs.com/package/file-saver
用到的API
- saveAs(blob, "1.docx")：
将目标文件对象保存为目标类型的文件，并命名
二、实现步骤
1、完成word模板
首先，根据需要导出的word文件的要求，先使用word制作出模板，数据使用{变量}
代替。如下图：
word模板.png
注意：
模板文件推荐放在静态目录文件下。
使用vue-cli2的时候，放在static目录下。使用vue-cli3的时候，放在public目录下。
因为我在使用的时候，放入.vue文件的同级目录下，发现会读不到模板。
2、写出页面模板
页面代码：
<template>
<div class="threeLevelMain">
<!-- 报价容器 -->
<div class="quoteContainer">
<!-- 报价顶部信息 -->
<div class="quote_info clearfix">
<h3 class="h3_title">报价单</h3>
<div class="quote_itemBox">
<div class="quote_item">
<span class="quote_label">客户名称：</span>
<p class="quote_p">{{form.custName}}</p>
</div>
<div class="quote_item">
<span class="quote_label">联系方式：</span>
<p class="quote_p">{{form.phoneNumber}}</p>
</div>
</div>
<div class="quote_itemBox">
<div class="quote_item">
<span class="quote_label">项目要求：</span>
<p class="quote_p">{{form.projectRequirement}}</p>
</div>
<div class="quote_item">
<span class="quote_label">备注：</span>
<p class="quote_p">{{form.remark}}</p>
</div>
</div>
</div>
<!-- 设备选取表格 -->
<div class="quote_table clearfix">
<el-table
border
class="table_domQuote"
ref="tableDomQuote"
size="small"
:data="tableData"
style="width: 100%"
>
<el-table-column prop="number" width="80" label="序号" align="center"></el-table-column>
<el-table-column label="设备名称" prop="name" align="center"></el-table-column>
<el-table-column label="数量" prop="num" align="center"></el-table-column>
<el-table-column prop="salePrice" label="销售单价" align="center"></el-table-column>
<el-table-column prop="saleTotal" label="销售合计" align="center"></el-table-column>
<el-table-column label="备注" prop="remark" align="center"></el-table-column>
<div slot="append">
<div class="quoteTable">
<span class="quoteTable_sp1">合计：</span>
<span class="quoteTable_sp1">{{form.totalPrice}}</span>
</div>
</div>
</el-table>
</div>
</div>
<!-- 审核备注容器 -->
<div class="reasonBox clearfix">
<div class="title_checkReason">审核备注：</div>
<div class="checkReasonMain">
<div class="p_box">
<p class="p_checkReason">{{form.checkReason}}</p>
</div>
</div>
</div>
<!-- 底部按钮容器 -->
<div class="botmBtnContainer">
<el-button @click="exportWord" size="small" type="primary">导出word</el-button>
</div>
</div>
</template>
页面效果：
页面效果.png
3、script代码
<script>
export default {
name: "home",
data() {
return {
// 表单对象
form: {
custName: "杰斯", // 客户姓名
phoneNumber: "138xxxxxxxx", // 联系方式
projectRequirement: "为了更美好的明天而战", // 项目要求
totalPrice: 140, // 合计报价
remark: "QEWARAEQAAAAAAAAA", // 备注
checkReason: '同意' // 审核备注
},
// 表格信息
tableData: []
};
},
created() {
this.tableData = [
{
number: 1, // 序号
name: "设备1", // 设备名称
num: 1, // 数量
salePrice: 10, // 销售单价
saleTotal: 10, // 销售合计
remark: "啦啦啦" // 备注
},
{
number: 2, // 序号
name: "设备2", // 设备名称
num: 2, // 数量
salePrice: 20, // 销售单价
saleTotal: 40, // 销售合计
remark: "啦啦啦" // 备注
},
{
number: 3, // 序号
name: "设备3", // 设备名称
num: 3, // 数量
salePrice: 30, // 销售单价
saleTotal: 90, // 销售合计
remark: "啦啦啦" // 备注
}
];
},
methods: {
// 点击导出word
exportWord: function() {
let _this = this;
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent("input.docx", function(error, content) {
// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error;
}
// 创建一个JSZip实例，内容为模板的内容
let zip = new JSZip(content);
// 创建并加载docxtemplater实例对象
let doc = new window.docxtemplater().loadZip(zip);
// 设置模板变量的值
doc.setData({
..._this.form,
table: _this.tableData
});
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"
});
// 将目标文件对象保存为目标类型的文件，并命名
saveAs(out, "报价单.docx");
});
}
}
};
</script>
4、测试结果
点击导出的结果：
word效果.png
