docx-templates前端模板引擎生成word

前端生成word的方法还挺多的，在开始这项功能之前应该先选一份合适自己的框架，笔者最开始使用的就是docxtemplater框架，优点就是npm上面周下载量挺多的，看文档示例还有网友写的文章挺简单的上手很快，缺点就是商业化的框架要收费，如果你的word比较复杂有图片啥的，图片模板就是要收费的。后来发现了一个比较小众的 docx-templates（https://github.com/guigrpa/docx-templates），虽然小众但是能满足自己的需求就行。目前这个框架网上的资料除了github上的文档几乎没有任何资料，这里简单记录一下用法。有时间再来补充踩过的坑，这个坑主要都在图片合成那边。框架本身没啥问题。

要做的功能如下图是一个网页，点击下载生成一个一样的word，后端因为一些原因，现在生成word的功能放在了前端。这个功能其实不难，难的是在word中插入图片，一个是地图位置的图片，另一个是一个图片列表含有多张图片，除此之外你要合成一个蓝色的header头，这个图片后端返回的是一个图片地址。

这是vue项目
安装：cnpm i docx-templates -S// jszip-utils 用于获取模板文件 template.docx，讲道理浏览器是不允许未经用户允许读取本地数据和写入数据到本地，因为这违反了浏览器的安全策略，所以有这个库我也很意外，要不然这个功能用这个库可能搞不起来，除非让用户主动上传模板，github给出的也是用户主动上传模板。这个文件我放在public目录底下，具体template.docx 文件样式我截图放在最后cnpm i jszip-utils -S import JSZipUtils from 'jszip-utils';
/* 生成word */
const { createReport } = require('docx-templates');// 点击下载按钮执行的word合成代码，这里只留了 creator 和 getMapPicture() 地图图片作为示例
JSZipUtils.getBinaryContent('./template.docx',async (error, template) => {// 抛出异常if (error) {throw error;}const report = await createReport({template,data: {//这个是你要放在 template.docx模板中的字段，这个变量后面会插入到template.docx模板中creator: 'zhangsan',},// 这个对象里面的函数会在合成模板之前被执行additionalJsContext: {// 返回的格式如下， res 是图片 base64 编码getMapPicture: async () => {const res = await this.getMapPicBase64(ticketInfo);return {width: 6,height: 6,data: res,extension: '.png'};},},// 这个属性定义了模板中变量的边界，例如template.docx中插入变量就可以使用{ creator }cmdDelimiter: ['{', '}']});this.saveDataToFile(report,'123.docx',//文件名称'application/vnd.openxmlformats-officedocument.wordprocessingml.document');});}
// 下载按钮方法结束/* 下载word文件 */async saveDataToFile(data, fileName, mimeType) {const blob = new Blob([data], { type: mimeType });const url = window.URL.createObjectURL(blob);this.downloadURL(url, fileName, mimeType);setTimeout(() => {window.URL.revokeObjectURL(url);}, 1000);},async downloadURL(data, fileName) {const a = document.createElement('a');a.href = data;a.download = fileName;document.body.appendChild(a);a.style = 'display: none';a.click();a.remove();},

template.docx 模板，这几乎是我模板原件了

docx-templates前端模板引擎生成word相关推荐

Beetl 模板引擎生成word以及excel总结
Beetl Java模板引擎生成word excel 之前项目中使用freemarker和POI进行word以及excel的模板导出,在使用的过程中为了解决一些小问题,意外的接触了Beetl这款模板生 ...
springboot项目使用beetl模板引擎生成word文件
一.详情可查看官网 1.官方网址:beetl官网一.简单测试beetl生成word文件 1.在springboot项目中添加beetl的依赖 <dependency><groupI ...
java 前端模板_前端模板引擎入门
模板引擎模板引擎起到数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍, java后台的 ...
Freemarker - 根据模板动态生成word文档
文章目录 Freemarker 根据模板动态生成word文档 Freemarker 介绍: Freemarker 使用: freemarker加载模板目录的方法参考资料 Freemarker 根据模 ...
使用freemarker模板引擎导出word文件
目录第一步:创建Word模板第二步:整理好数据,核对好数据要填充的位置第三步:使用工具类生成word文件工具类: 第一步:创建Word模板创建需要的模板另存为:单一网页文件文件名最好改为 ...
SpringBoot+Poi-tl根据Word模板动态生成word(含动态行表格、合并单元格)
本编文章继SpringBoot+Poi-tl根据Word模板动态生成word(含动态行表格)文章之后介绍Poi-tl导出word的延伸功能: 所需依赖以及word模板所属位置见 SpringBoo ...
html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
前端模板引擎 artTemplate的使用与进阶
前端模板引擎 artTemplate的使用与进阶查看全文 http://www.taodudu.cc/news/show-3760040.html 相关文章: springboot 整合 free ...
swig模板 PHP,nodejs前端模板引擎swig入门
相对于jade,我还是更喜欢swig前端模板引擎,jade虽然语法简练高效了不少,但是在我这最大的问题是他没有一个html该有的样子... 所以我还是决定使用swig,页面结构,样子都是熟悉的样子, ...

docx-templates前端模板引擎生成word

docx-templates前端模板引擎生成word相关推荐

最新文章

热门文章