关于javascript:前端使用docxtemplater导出word文档最佳实践

5次阅读

共计 3651 个字符，预计需要花费 10 分钟才能阅读完成。

作者简介：Quixn，专一于 Node.js 技术栈分享，前端从 JavaScript 到 Node.js, 再到后端数据库，优质文章举荐，【小 Q 全栈指南】作者，Github 博客开源我的项目 github.com/Quixn…

大家好，我是 Quixn。最近在做业务零碎时，遇到到一个需要。须要零碎导出 word 文档，内容是比较复杂的表格。

个别业务零碎遇到这种需要，都是后端同学来做导出，前端同学只需接管文件即可。毕竟后端有很多这方面成熟的库能够应用，而前端则很少有这方面开源的插件能够应用。没方法，跟笔者对接的后端同学恰好是个没什么教训的，不会做 word 文档导出。

既然如此，那就只能本人上了。Google 了一圈之后，发现前端能应用的也就一个 docxtemplater 库,star 数2.1k，应用起来十分便携，也非常满足此次的需要。大家有其余更好的库举荐，欢送留言告知。

官网 https://docxtemplater.com/
GitHub https://github.com/open-xml-t…

docxtemplater 应用 JSON 数据格式作为输出，能够解决 docx 和 ppt 模板。不像一些其它的工具，比方 docx.js, docx4j, python-docx 等，须要本人编写代码来生成文件，docxtemplater只须要用户通过标签的模式编写模板，就能够生成文件。

我的项目所需依赖：docxtemplater，jszip，jszip-utils，pizzip，file-saver。

1、docxtemplater：这个插件能够通过事后写好的 word，excel 等文件模板生成对应带数据的文件

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

3、jszip-utils：与 jszip/pizzip 一起应用，jszip-utils 提供一个 getBinaryContent(path, data)接口，path 即是文件的门路，反对 AJAX get 申请，data 为读取的文件内容。

4、file-saver：适宜在客户端生成文件的工具，它提供的接口 saveAs(blob, “1.docx”)将会应用到，不便咱们保留文件。

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

npm 装置如下：

npm install  docxtemplater pizzip --save  // 解决 docx 模板
npm install  jszip-utils --save
npm install  jszip --save   
npm install  file-saver --save  // 解决输入文件

创立 word 模板：public/test.docx

vue cli3/vue cli4 在 public 文件下寄存 word 模板 test.docx;
vue cli2 在 static 文件下寄存 word 模板 test.docx;

如果间接在代码编辑器内通过新建文件的形式创立 test.docx 前面会报错，应该和文件编码格局无关，所以须要进入我的项目文件夹内右键新建 docx 文件，test.docx内编辑后编辑器内能够看到 pulic 文件下多了一个 ~$test.docx 文件；呈现这个文件夹根本就能够了。

{%img} 图片

{#list}{/list} 循环、if 判断

{#list}{/list}{^list}{/list} if else

{str} 文字

docxtemplater 通过标签的模式来填充数据的，简略的数据咱们能够应用 {} + 变量名 来实现简略的文本替换。

例如：

简单的数据，例如须要多选打√的，就须要应用docxtemplater 的条件判断语法来实现。

实现如下：传入的变量 category1 为true 时，才会渲染打 √ 的成果。此时要传入另一个变量 category_1, 值为category1 取反。

如果整个 word 文档里有很多这种须要打钩的需要，那么这种实现形式就有一个很大的 弊病 ：须要定义很多的变量来管制是否显示打√。也能够应用if-else 的语法实现。笔者也在网上看到一个另外的解决方案，笔者试了过成果并不现实，无奈实现需求，大家也能够尝试一下。大家如果有更好的解决办法，欢送留言告知。

表格需要实现如下：

创立一个 exportWordDocx.js 文件，定义一个 exportWordDocx 函数，接管三个入参，demoUrl代表导出的 word 文档模板门路，docxData代表模板文档里定义的 dept、applyDate 等字段整合给docxData 传入即可。fileName代表导出的文件名，方面重命名等操作。

将 demoUrl 传入给 JSZipUtils.getBinaryContent 办法读取模板文件的二进制内容，之后创立一个 PizZip 实例，内容为模板的内容, 再创立并加载 docxtemplater 实例对象。

应用 doc.setData 办法设置模板变量的值，对象的键须要和模板上的变量名统一，值就是你要放在模板上的值。

这里有一个中央须要留神的是：如果你的定义放在模板上的值为 null 或者 undefined，最初导出来的word 文档里，绝对应的中央会间接显示 undefined。解决办法：doc.setOptions 办法里的nullGetter 值返回设置为空即可。

最初，通过 saveAs 办法导出 Word 文档。

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

export const exportWordDocx = (demoUrl, docxData, fileName) => {
    // 读取并取得模板文件的二进制内容
    JSZipUtils.getBinaryContent(
        demoUrl,
        function (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);
        }
    );
}

至此，咱们应用 docxtemplater 导出 word 文档的实际就告一段落了。文章从介绍前端应用 docxtemplater 导出 word 文档场景，再到简要介绍 docxtemplater 根本应用语法，再到残缺的代码示例实现导出性能。

欢送关注，公众号回复【docxtemplater 最接实际】获取文章的全副源码。

对于我 & Node 交换群

大家好，我是 Quixn，专一于 Node.js 技术栈分享，前端从 JavaScript 到 Node.js, 再到后端数据库，优质文章举荐。如果你对 Node.js 学习感兴趣的话（后续有打算也能够)，能够关注我，加我微信【Quixn1314】，拉你进交换群一起交换、学习、共建，或者关注我的公众号【小 Q 全栈指南】。Github 博客开源我的项目 github.com/Quixn…

欢送加我微信【Quixn1314】，拉你进 Node.js 高级进阶群，一起学 Node，长期交流学习 …

正文完