前端工具库 xlsx 处理表头合并

关于 node-xlsx

在 web 开发中，管理后台生成 excel 报表是一个很常用的功能，很多 JavaScript 开发者也提供了很多的这方面的工具来实现这一功能，node-xlsx 就是一个基于 node.js 和 SheetJS 、处理 xlsx 格式的工具库。

本篇文章讲解通过xlsx处理多级表头合并这一痛点，不管是多级表头，行还是列，多复杂的表头合并都可以轻松办到

核心代码

export function  mergeHeader(headers, data, datamerges, defaultTitle){
  const ws = XLSX.utils.book_new();

  XLSX.utils.sheet_add_aoa(ws, headers);

//这里要给表头预留位置
  XLSX.utils.sheet_add_json(ws, data, {origin: 'A'+(headers.length+1),  skipHeader: true });

  ws["!merges"] = datamerges;
  const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };
  var title = defaultTitle || '列表'
  const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };

  const FileSaver = require('file-saver')
  const saveAs = FileSaver.saveAs
  saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream"}), title + '.' + (wopts.bookType == "biff2" ? "xls" : wopts.bookType));
}

举例简单合并

this.list = res.data.rows;
var datamerges=[
	{s:{c:0,r:0},e:{c:2,r:0}}, //合并第一行 第1个至第3个
	{s:{c:3,r:0},e:{c:5,r:0}},// 合并第一行  第4个至第6个
];

let headers = []

//每个合并的开始位置，也就是s的c位置要有数据
headers.push(['合并第一行第一格', '', '', '合并第二行第二格']) 
headers.push(['id','书名','来源','状态','作者', '最新章节'])

const { mergeHeader } = require('@/vendor/Export2Excel');
mergeHeader(headers, res.data.rows, datamerges, '书籍列表');

举例复杂多级表头，行和列合并

this.list = res.data.rows;
var datamerges=[
  {s:{c:4,r:0},e:{c:5,r:0}},// 合并第一行  第5个至第6个
  {s:{c:2,r:0},e:{c:3,r:1}},// 合并第一行和第二行的第3,4列
  {s:{c:5,r:1},e:{c:5,r:2}},// 合并第二行和第三行的第6列
];

let headers = []
//每个合并的开始位置，也就是s的c位置要有数据
headers.push(['', '', '合并第1行和第2行的第3,4列', '', '合并第1行5列至6列', ''])
headers.push(['', '', '', '', '', '合并第2行和第3行的第6列'])
headers.push(['id','书名','来源','状态','作者', ''])

const { mergeHeader } = require('@/vendor/Export2Excel');
mergeHeader(headers, res.data.rows, datamerges,'书籍列表');

数据格式为对象数组

总结

1. sheet_add_json方法添加数据时，根据表头的行数给表头预留位置
2. xlsx会默认根据数据的键添加表头，所以sheet_add_json需要设置skipHeader
3. datamerges 数组表示对行和列进行合并，c表示column(列)，r表示row(行)，s表示start(开始)，e表示end(结束)，索引从0开始
4. 版本：0.18.5
5. 有需要的可以查看文档：npmJS-xlsx文档

Python系列：
读取文件 – 使用python读取 xls，xlsx，csv，doc，docx，pdf 格式的文件

阅读小工具 – 使用python开发无边框窗体阅读小工具

操作xlsx文件 – 使用openpyxl技术对xlsx的各种操作

前端系列：
扫雷游戏 – JavaScript 仿造 windows 编写 扫雷游戏

前端工具库 xlsx 处理表头合并 – 如何使用xlsx技术处理复杂的表头合并

CSS 布局技巧 – 对整体布局的心得体会

NVM Node 多版本控制教程 – Node版本控制神器 NVM

Spring系列：
Spring部署 – Spring的多种linux部署方式

Spring实现策略模式 – 通过Spring实现多种策略模式