js 导出数组为docx

迷途橘

2022 年 05 月 10 日

29 次浏览

暂无评论

1579字数

js 小方法

## 下载引入插件

```shell
npm install file-saver@1.3.8 jszip@2.6.1 jszip-utils@0.0.2 docxtemplater@3.27.2
```

```js
import { saveAs } from "file-saver"
import JSZip from "jszip"
import JSZipUtils from "jszip-utils"
import Docxtemplater from 'docxtemplater'
```

## 准备数据模板
```js
const data = {
    student:[
        {
            name:'寇xx',
            age:18,
            sex:'女'
        },
        {
            name:'马xx',
            age:58,
            sex:'女'
        },
        {
            name:'周xx',
            age:68,
            sex:'女'
        },
        {
            name:'杨xx',
            age:98,
            sex:'女'
        }
    ]
}
```
![image](https://ypy.hellokfq.top/2db45663e54b01244f73eb7fdd02f193.png_blog)

```
{#student}
1.
姓名：{name}
年龄：{age}
性别：{sex}
{/student}
```
> 注意：{} 中不可以有空格

## 导出
```js
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent("exam.docx", function (error, content) {
  // exam.docx是模板，我们在导出的时候，会根据此模板来导出对应的数据
  // 创建一个JSZip实例，内容为模板的内容
  let zip = new JSZip(content)
  // 创建并加载docxtemplater实例对象
  let doc = new Docxtemplater()
  doc.loadZip(zip)
  // 设置模板变量的值
  doc.setData(data)
  // 用模板变量的值替换所有模板变量
  doc.render()
  // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
  let out = doc.getZip().generate({
    type: "blob",
    mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
  })
  // 将目标文件对象保存为目标类型的文件，并命名
  saveAs(out, "文件.docx")
})
```

## 导出结果
![image](https://ypy.hellokfq.top/ef36eecbddf91ad26d9aa6a21b7f72a4.png_blog)

最后修改：2022 年 12 月 07 日