vuecli4 使用docxtemplater导出word（超详细） vue.jsword

项目需求：前端层面实现导出word功能
项目准备：

vue脚手架项目(vue-cli4)
插件：docxtemplater pizzip jszip jszip-utils file-saver

1.安装依赖：

npm installdocxtemplater pizzip --save// 处理docx模板 npm installjszip-utils --save npm installjszip@2.6.1 --save npm installfile-saver --save// 处理输出文件

坑1：执行npm install jszip --save 会下载最新版本导致报错，必须指定版本号，亲测2.6.1版本可行

2.创建word模板：public/test.docx

vuecli3/vuecli4在public文件下存放word模板test.docx; vuecli2在static文件下存放word模板test.docx;

文章图片
word模板示例：
文章图片
坑2：如果直接在代码编辑器内通过新建文件的方式创建test.docx后面会报错，应该和文件编码格式有关，所以需要进入项目文件夹内右键新建docx文件，test.docx内编辑后编辑器内可以看到pulic文件下多了一个~$test.docx文件；出现这个文件夹基本就okay了

3.封装导出word组件：src/components/export2word.vue

4.页面使用word组件：src/views/page.vue

.page { box-sizing: border-box; width: 100%; height: 100vh; user-select: none; } .page .download { border: 1px solid #000; padding: 5px 10px; height: 50px; margin-left: 100px; cursor: pointer; }

5.填充word模板数据：

填充数据根据渲染数据的结构而定，这里提供了数组和对象数据结构

解析变量：{变量名} 循环： {#数组名} {元素名1}{元素名2}.... {/数组名} 条件： {#条件} {变量} {/条件}
坑3：注意使用JS对象点语法是访问不到变量的，对象格式数据访问{#父对象名}{子属性}{/父对象名}

文章图片