vue 插入word模板 项目_vue项目前端导出word文件(bug解决)

摘要：之前项目中导出价格表是由后端实现，前端只需要调用接口下载word即可，后来业务改变比较大，word模版需要一直改动，后端改起来相对麻烦，后来直接前端自己定义模版，实现下载word文档。

一、需要安装的依赖

1、docxtemplater

介绍：docxtemplater是一种邮件合并工具，它以编程方式使用，处理条件、循环，并且可以扩展为表格、HTML、图像等。

安装方法：cnpm i docxtemplater@^3.9.1

2、FileSaver

介绍：FileSaver.js 是在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的应用。

安装方法：cnpm i file-saver@^1.3.8

3、jszip

介绍：jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，且API的使用也很简单。

安装方法：cnpm i jszip@^2.6.1

4、jszip-utils

介绍：jszip-utils是与jszip一起使用的跨浏览器的工具库

安装方法：cnpm i jszip-utils@^0.0.2

二、创建word模版

介绍：根据自己的业务需求创建需要导出的word模版，变量数据使用{变量名}代替，表格内容数据需要使用{#参数名}开始{/参数名}结尾，具体如下图：

注意点：1.模板文件使用vue-cli2的时候，放在static目录下。使用vue-cli3的时候，放在public目录下。

2.文件须以docx结尾。

不然可能出现的问题：提示Uncaught Error: Corrupted zip: missing 7124 bytes.

vue-cli3示例位置如图：

三、html代码编写

定义下载事件downloadprice

下载价格表