vue 前端导出word文档

操作步骤

1、安装插件

-- 安装 docxtemplater

cnpm install docxtemplater pizzip  --save

-- 安装 jszip-utils

cnpm install jszip-utils --save

-- 安装 jszip

cnpm install jszip --save

-- 安装 FileSaver

cnpm install file-saver --save

2、在需要的组件中引入

import jszip from 'jszip'

import jszip_utilsfrom 'jszip-utils'

import docxtemplater from 'docxtemplater'

import FileSaver from 'file-saver'

3、创建模板文件

首先创建一个模板文件，事先定义好格式和内容。docxtemplater 之前介绍到是通过标签的形式来填充数据的，简单的数据我们可以使用{} + 变量名来实现简单的文本替换。

① 文本替换

定义模板

test {name}

数据定义

{"name":"hello"}

输出效果

test hello

② 循环输出

定义模板

{#table}

{name},{age}

{/table}

定义数据

{

"data":[

    {"name":"张三","age":18},

    {"name":"李祀","age":28},

]

}

输出效果

张三，18

李祀，28

ps：使用时将data对应的数据赋值给table

pps：整体循环输出多张表格时，将循环的位置设置在表格之外，示例如下

将写好的模板放在目录下，笔者放在public/outsideExample.docx下

4、使用

①读取模板内容

②装载到zip对象中

③设置文件数据

④生成文件

⑤保存文件

代码：

jszip_utils.getBinaryContent("outsideExample.docx",function(error, content) {

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

// 抛出异常

    if (error) {

throw error;

}

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

    var zip =new jszip(content);

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

    var doc =new window.docxtemplater().loadZip(zip);

// 设置模板变量的值

    doc.setData({

table:data

    })

try {

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

        doc.render();

}catch (error) {

// 抛出异常

        var e = {

message: error.message,

name: error.name,

stack: error.stack,

properties: error.properties

        };

console.log(JSON.stringify({error:e }));

throw error;

}

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

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

type:"blob",

mimeType:

"application/vnd.openxmlformats-officedocument.wordprocessingml.document"

    });

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

    FileSaver.saveAs(out,"文件名.docx");

});

9-4 更新

模板定义中判断语句的写法：{#name}{name}{/name}