vue里使用word模板导出word文档

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

/**数据*/
 form: {       
  custName: "杰斯", // 客户姓名        
  phoneNumber: "138xxxxxxxx", // 联系方式        
  projectRequirement: "为了更美好的明天而战", // 项目要求        
  totalPrice: 140, // 合计报价       
   remark: "QEWARAEQAAAAAAAAA", // 备注        
   checkReason: '同意' // 审核备注      
},
/**方法*/
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");      
        });   
       },

模板
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卤鸽子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值