vue 生产word_vue 导出word文档

1 public下面新建word文档，填入Hi   {nickName}，nickName是字段名称，在需要导出word文档的界面定义

obj：{

nickName："师太"

}

2 安装命令

npm install docxtemplater pizzip

npm install jszip-utils --save

npm install jszip --save

npm install file-saver --save

3 在需要导出word文档的页面引入

import Docxtemplater from 'docxtemplater';

import { saveAs } from 'file-saver';

import JSZip from 'jszip';

import JSZipUtils from 'jszip-utils';

4 编写点击事件

let _this = this;

//1.docx，要和自己定义的文档名称保持一致

JSZipUtils.getBinaryContent('1.docx', function(error, content) {

// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据

// 抛出异常

if (error) {

throw error;

}

// 创建一个JSZip实例，内容为模板的内容

let zip = new JSZip(content);

// 创建并加载docxtemplater实例对象

let doc = new Docxtemplater();

doc.loadZip(zip);

// 设置模板变量的值

doc.setData({..._this.obj,});

// 用模板变量的值替换所有模板变量

try {doc.render()} catch (error) {

// 抛出异常

let e =

{message: error.message,name: error.name,stack: error.stack,properties: error.properties};

throw error}

// 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件，而是在内存中的表示)

let out = doc.getZip().generate({

type: 'blob',

mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'

});

// 将目标文件对象保存为目标类型的文件，并命名

saveAs(out, _this.obj.nickName + '的简介.docx');

});