Kros的博客 Kros的博客
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云

Kros

凡心所向,素履以往,生如逆旅,一苇以航
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云
  • CSS

  • JavaScript

  • 工具

    • git命令行
    • uniapp小程序分包配置
    • VScode使用Todo tree实现待办查看
    • activiti editor添加自定义属性
    • uniapp使用svg
    • windows端口查看及关闭端口
    • uniapp通过wifi无线运行到手机
    • android生成证书文件
    • vscode中显示换行指示线
    • 浏览器console输出自定义样式内容
    • console的非常规用法
    • uniapp App升级更新
    • 从零开始搭建脚手架1
    • vite打包插件上传到npm
    • uniapp使用speech模块遇到的问题
    • HbuilderX使用MuMu模拟器
    • HbuilderX调试app页面元素
    • 前端工程化的理解
    • console log打印obj非实时性数据问题
    • 常见http状态码
    • HbuilderX配置自定义打包环境
    • webpack优缺点
    • axios和ajax的区别
    • 使用docxtemplater导出word文件
    • docxtemplater循环列表数据导出
    • js打开钉钉打卡页面
    • uniapp配置自定义环境变量和条件编译变量
    • 文件上传时的各种二进制数据关系
    • 解决开发过程中的跨域问题
    • vue自定义入口html文件
    • tsParticles局部粒子效果
    • 使用verdaccio搭建私人npm仓库
  • Vue

  • antdv踩坑记录

  • Vue3

  • 前端
  • 工具
kros
2024-01-02

docxtemplater循环列表数据导出

从上一篇文章使用docxtemplater导出word文件我们已经学会使用docxtemplate进行基础的模版导出,在实际项目中我们的数据不可能都是一个个固定的字段,多半会有列表、表格、图片甚至会有图表和html渲染,所以我们还要学习使用doctemplater的一些高级用法。 这篇文章将学习docxtemplate如果导出动态的列表循环数据。 首先也是准备模版,在表格中以数据列表字段{#list}开启一个列表循环,以{/list}结束一行,中间的{name}则为具体的行字段名,可以参考loop-demo

模版

将上一篇文章中的data数据替换如下:

const data = {
  {
    "name": "John Doe",
    "age": 30,
    "list": [
      { "name": "张三", "age": 45, "native": "汉", "work": "教师"},
      { "name": "李四", "age": 53, "native": "汉", "work": "无"}
    ]
  }
};

1
2
3
4
5
6
7
8
9
10
11

最总效果:

效果

更多官方demo

上次更新: 2025/09/05, 8:09:00
使用docxtemplater导出word文件
js打开钉钉打卡页面

← 使用docxtemplater导出word文件 js打开钉钉打卡页面→

最近更新
01
Find the next perfect square
09-05
02
Regex validate PIN code
09-05
03
Find the odd int
09-05
更多文章>
Theme by Vdoing | Copyright © 2020-2025 kros king
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
icon-heart-o icon-heart icon-infinity icon-pause icon-play link next prev