前端生成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,讲道理浏览器是不允许未经用户允许读取本地数据和写入数据到本地,因为这违反了浏览器的安全