前端导出Word文件

简要说明

创建word模板，传入json数据，js导出word文件

当前环境

vue@2
node@14

安装依赖

npm install jszip-utils docxtemplater file-saver pizzip --save

docxtemplater：这个插件可以通过预先写好的word，excel等文件模板生成对应带数据的文

pizzip：这个插件用来创建，读取或编辑.zip的文件，同步的（还有一个插件是jszip，异步的）

jszip-utils：与jszip/pizzip一起使用，jszip-utils 提供一个getBinaryContent(path, data)接口，path即是文件的路径，支持AJAX get请求，data为读取的文件内容。

file-saver：适合在客户端生成文件的工具，它提供的接口saveAs(blob, "1.docx")将会使用到，方便我们保存文件。

docxtemplater-image-module-free：需要导出图片的话需要这个插件

docxtemplater 不支持jszip，会有报错，因此要使用PizZip

创建word模板

可参考官方样例 https://github.com/open-xml-templating/docxtemplater#features

本篇文章所使用的是生成表格，即 https://docxtemplater.com/demo/#loop-table

使用的word模板如下，即新建一个word文档，插入表格，按docxtemplater的格式要求输入数据字段，最后将docx文件放入项目的public文件夹下

创建js方法

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

export const exportWordDocx = (templateUrl, docxData, fileName) => {
    // 读取并获得模板文件的二进制内容
    JSZipUtils.getBinaryContent(
        templateUrl,
        (error, content) => {
            // 抛出异常
            if (error) {
                throw error;
            }
            // 创建一个PizZip实例，内容为模板的内容
            let zip = new PizZip(content);
            // 创建并加载docxtemplater实例对象
            let doc = new docxtemplater().loadZip(zip);
            // 去除未定义值所显示的undefined
            doc.setOptions({
                nullGetter: function () {
                    return "";
                }
            }); 
            // 设置模板变量的值，对象的键需要和模板上的变量名一致，值就是你要放在模板上的值
            doc.setData({
                ...docxData,
            });

            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, fileName);
        }
    );
}

引入使用

import { exportWordDocx } from "@/utils/commom.js"
....
const tableData = [
  {
    username: "zhang san",
    age: 18
  },
  {
    username: "li si",
    age: 38
  }
]
// 注意，exportWordDocx的第二个参数是一个对象，key值为word模板里表格中跟在“#”后的变量
exportWordDocx("/word-template.docx",{tableData},"导出的word")