纯 vue 导出word文档,亲测记录

**

亲测成功在此记录

**
安装插件:

cnpm install docxtemplater pizzip --save-dev
cnpm install jszip-utils --save
cnpm install jszip --save
cnpm install file-saver --save

导入插件

	import docxtemplater from 'docxtemplater'
	import PizZip from 'pizzip'
	import JSZipUtils from 'jszip-utils'
	import {saveAs} from 'file-saver'

添加模板:

将word模板添加到项目中。
注意:
模板文件推荐放在静态目录文件下。
使用vue-cli2的时候,放在static目录下。使用vue-cli3的时候,放在public目录下。
在这里插入图片描述

在这里插入图片描述

调取方法(具体数据自己修改)

exportWord(row){	
					console.log(row)
				    let that = this;
				    // 读取并获得模板文件的二进制内容
				    JSZipUtils.getBinaryContent("../../../../static/file/word.docx", function(error, content) {
				        // model.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
				        // 抛出异常
				        if (error) {
				            throw error;
				        }
				        // 创建一个PizZip实例,内容为模板的内容
						console.log(content)
				        let zip = new PizZip(content);
				        // 创建并加载docxtemplater实例对象
				        let doc = new docxtemplater().loadZip(zip);
					
				        // 设置模板变量的值
							doc.setData({
								name:row.name,
								phone:row.phone,
								age:row.age,
								birth:row.birth.slice(0,11),
								position:row.position,
								email:row.email,
								salary:row.salary,
								location:row.location,
								salfEvaluation:row.salfEvaluation,
								
								//教育经历
								educationRecord:JSON.parse(row.educationRecord),
								//工作经历
								workHistory:JSON.parse(row.workHistory),
								//项目经理历
								evaluation:JSON.parse(row.evaluation)
							});	
				        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 }));
							// console.log('1111')
							// 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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值