Vue导出Excel表格

项目中碰到一个需求:在前端将数据导出Excel表格,并且合并部分单元格。

这里我用SheetJS的js-xlsx这个工具库。

引入依赖

引入依赖:

1
npm install xlsx --save

然后在需要使用的组件内引用:

1
import XLSX from 'xlsx'

导出数据

我们使用这个工具类aoa_to_sheet,它可以将一个二维数组转成sheet,会自动处理number、string、boolean、date等类型数据。

下面是一个示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 需要导出的数据
var aoa = [
['姓名', '性别', '年龄', '注册时间'],
['张三', '男', 18, new Date()],
['李四', '女', 22, new Date()]
];

// 导出的表格名称
const filename ='导出表格.xlsx';
// Excel第一个sheet的名称
const ws_name = 'Sheet1';
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(aoa);
// 将数据添加到工作薄
XLSX.utils.book_append_sheet(wb, ws, ws_name);
// 导出Excel
XLSX.writeFile(wb, filename);

我们需要把要导出的数据构造成二维数据的形式。

合并单元格

一个示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 需要导出的数据
var aoa = [
['主要信息', null, null, '其它信息'],
['姓名', '性别', '年龄', '注册时间'],
['张三', '男', 18, new Date()],
['李四', '女', 22, new Date()]
];

// 导出的表格名称
const filename ='导出表格.xlsx';
// Excel第一个sheet的名称
const ws_name = 'Sheet1';
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(aoa);
mergeArr = [
// 设置A1-C1的单元格合并
{s: {r: 0, c: 0}, e: {r: 0, c: 2}}
];
ws['!merges'] = mergeArr;
// 将数据添加到工作薄
XLSX.utils.book_append_sheet(wb, ws, ws_name);
// 导出Excel
XLSX.writeFile(wb, filename);

参数含义:

  • s 意为 start ,即开始的单元格
  • e 意为 end ,即结束的单元格
  • r 是 row ,表示行号,从 0 计起
  • c 是 col ,表示列号,从 0 计起

合并多个单元格:

1
2
3
4
5
6
const merge = [
// 纵向合并,范围是第1列的行1到行2
{ s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
// 纵向合并,范围是第2列的行1到行2
{ s: { r: 0, c: 1 }, e: { r: 1, c: 1 } },
];

参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

欢迎关注我的其它发布渠道