docxtemplater 实现前端word模板修改(普通文本、图片、表格),并且下载

一、问题背景

        项目业务需要,需要实现下载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, 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值