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

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

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

1.安装依赖：

npm install  docxtemplater pizzip --save  // 处理docx模板
npm install  jszip-utils --save
npm install  [email protected] --save   
npm install  file-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

5.填充word模板数据：

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

  解析变量：{变量名}
  循环：
  {#数组名}
   {元素名1}{元素名2}....
  {/数组名}
  条件：
  {#条件}
   {变量}
  {/条件}

• 坑3：注意使用JS对象点语法是访问不到变量的，对象格式数据访问{#父对象名}{子属性}{/父对象名}
  

结论

好好啃官网，就是看起来好烦，附上官网供你们继续烦：https://docxtemplater.com/doc...