vue项目导出word

一、需要的js依赖

实现此功能需要使用到docxtemplater、jszip-utils、jszip、FileSaver等js文件

1、docxtemplater

介绍

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

参考链接：https://docxtemplater.readthedocs.io/en/latest/index.html

用到的API

• new window.docxtemplater：
  创建docxtemplater实例对象，返回一个新的docxtemplater对象
• loadZip(zip)：
  docxtemplater对象加载zip实例
  注意：必须从jszip的2.x版本向该方法传递一个zip实例
• setData(Tags):
  设置模板变量的值
• render()：
  此函数用模板变量的值替换所有模板变量
• getZip()：
  此函数返回代表docxtemplater对象的zip

2、jszip-utils

介绍

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

参考链接：https://stuk.github.io/jszip-utils/

用到的API

• getBinaryContent()：
  读取并获得模板文件的二进制内容

3、jszip

介绍

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

参考链接：https://stuk.github.io/jszip/

用到的API

• new JSZip()：
  创建一个JSZip实例
• generate()：
  此函数可以生成一个zip文件（不是一个真实的文件，而是在内存中的表示）

4、FileSaver

介绍

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

参考链接：
https://www.cnblogs.com/yunser/p/7629399.html
https://www.npmjs.com/package/file-saver

用到的API

• saveAs(blob, "1.docx")：
  将目标文件对象保存为目标类型的文件，并命名

二、实现步骤

1、完成word模板

首先，根据需要导出的word文件的要求，先使用word制作出模板，数据使用{变量}
代替。如下图：

word模板.png

注意：
模板文件推荐放在静态目录文件下。
使用vue-cli2的时候，放在static目录下。使用vue-cli3的时候，放在public目录下。
因为我在使用的时候，放入.vue文件的同级目录下，发现会读不到模板。

2、写出页面模板

页面代码：

页面效果：

页面效果.png

3、script代码

4、测试结果

点击导出的结果：

word效果.png

三、完整demo

码云项目链接：https://gitee.com/guolin741/exportword