安装四个依赖

  npm install docxtemplater jszip-utils jszip FileSaver --S

创建一个world模板 目录放在 public里面

模板样式

引入

import docxtemplater from 'docxtemplater';
import JSZipUtils from 'jszip-utils';
import { saveAs } from 'file-saver';
import JSZip from 'jszip';

js代码

<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: {// 点击导出wordexportWord: 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 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>

转载自用（如有侵权请联系） 转自于https://www.jianshu.com/p/b3622d6f8d98