一、问题背景
项目业务需要,需要实现下载word,并且对word中的内容进行指定输出,包含普通文本、图片、以及表格;
Documentation | docxtemplater 可以实现对模板word内容的替换; 非常好用,但是存在部分插件使用收费情况,所以选择其它免费的代替,图片使用 docxtemplater-image-module-free,表格使用它自带的循环去实现,缺点就是不能自定义表格,必须要提前在模板中内置好表格使用;
二、相关准备
我使用的是vite+ts 、使用需要安装指定包;
npm i docxtemplater pizzip docxtemplater-image-module-free file-saver
准备word模板 - 模板要求
普通文本 {time}
图片 {%img}
表格 {#table}{col1} {col2} {col3}{/table}
准备好模板后,将模板放入项目的public文件夹内,以便后续使用;
三、过程
读取文件,传入对应的模板word地址;
import PizZipUtils from "pizzip/utils/index.js";
// 读取并获得模板文件的二进制内容
// url - '/新建DOCX文档.docx'
loadFile(url: string, callback: (error: any, content: any) => void) {
PizZipUtils.getBinaryContent(url, callback);
}
在对应的回调里面去生成pizZip对象, 传入 docxtemplater 对象中,进行处理;并且使用免费的图片图例插件,导入docxtemplater中使用;
// docxtemplater 文件模板修改工具
import Docxtemplater from "docxtemplater";
// 文件读取工具
import PizZip from "pizzip";
// 创建一个JSZip实例,内容为模板的内容
setPizZip(error:Error | null,