一. 组件介绍

要实现前端纯js导出word文档，我们需要用到docxtemplater，jszip-utils，file-saver三个组件，接下来简要的介绍以下三个组件。

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")：
  将目标文件对象保存为目标类型的文件，并命名

二. 操作步骤

2.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


没有cnpm可以使用npm

2.2 引入

在需要用到的组件中引入以上工具

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'
    

2.3 创建模板文件

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

 

注意：
模板文件推荐放在静态目录文件下。
使用vue-cli2的时候，放在static目录下。使用vue-cli3的时候，放在public目录下。

 script代码

我们可以参照 docxtemplater 给出的例子, 来实现文件导出。

1. 读取模板文件内容
2. 装载到zip对象中
3. 设置文件数据
4. 生成文件
5. 保存文件

//点击导出
deriveword(e) {
    console.log(e)
    let docxsrc = "../../../../static/daily.docx";        //模板文件的位置
    let docxname = "工作日志.docx";        //导出文件的名字
    // 读取并获得模板文件的二进制内容
    JSZipUtils.getBinaryContent(docxsrc, function(error, content) {
        // docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
            throw error;
        }
 
        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docx templater实例对象
        let doc = new docxtemplater().loadZip(zip);
        // 设置模板变量的值
        doc.setData({
            ...e, // e中的数据可以再模板中直接使用
            cause: e.form[4].val,
            arrive: e.form[2].val,
            starttime: e.form[1].val[0],
            endtime: e.form[1].val[1]
        });
 
        try {
            // 用模板变量的值替换所有模板变量
            doc.render();
        } catch (error) {
        // 抛出异常
        let e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
            };
        console.log(JSON.stringify({ error: e }));
        throw error;
        }
 
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, docxname);
    });
},

参数e的数据

{
  user_name: "XXX",
  remark: "XXX的外出申请",
  form:[
      {
          val: "私事"
      },
      {
          val: ["2020-09-23","2020-09-25"]
      },
      {
          val: "市内"
      },
      {
          val: "回家"
      },
      {
          val: "回家吃饭"
      },
  ]  
}

导出后文件