使用xlsx-js-style表格导出，合计，单元格居中，多级表头合并，添加序号

引入插件
import XLSXS from 'xlsx-js-style';
import FileSaver from 'file-saver';插件版本
"xlsx-js-style": "^1.2.0"
"file-saver": "^2.0.5",

const exportExcel = () => {// 第一列添加序号state.tableData  = state.tableData.map((row, index) => {return Object.assign({}, { index: index + 1 }, row);});//转换为一个二维数组let body = state.tableData.map(x => ([x.index,x.dwmc, x.gfje, x.zjgf, x.zggf]))let tableLength = state.tableData.length + 2/* 定义表头定义表头，每一行即是一个数组，数组中的元素即是一个个单元格内容。*/const header = [[{v: '表头标题',t: 's',},],['序号','单位','金额','其中处级','职工']]//表尾第三列合计const tail = ['', '合计', { f: `SUM(C3:C${tableLength})`}]// 将定义好的表头表尾添加到 body 中body.unshift(...header);body.push(tail)// aoa_to_sheet 将二维数组转成 sheet
const sheet = XLSXS.utils.aoa_to_sheet(body);// 设置合并单元格 s是起始位，e结束位
const merges = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 4 } },]
sheet['!merges'] = merges; // 将merges添加到sheet中// 设置列宽行高
const cols = [ { wch: 10 },{ wch: 25 },{ wch: 20 },{ wch: 20 },{ wch: 20 } ];
sheet['!cols'] = cols; // 将cols添加到sheet中
const rows = [ { hpx: 35 },{ hpx: 25 },{ hpx: 20 }]
sheet['!rows'] = rows; // 将rows添加到sheet中，设置行高// 设置单元格样式
//这里遍历单元格给单元格对象设置属性,s为控制样式的属性
Object.keys(sheet).forEach((key) => {if (key.indexOf('!') < 0) {sheet[key].s = {alignment: {//对齐方式horizontal: 'center',//水平居中vertical: 'center',//竖直居中// wrapText: true,//自动换行},}if (key.indexOf('1') !== -1) {sheet[key].s.font = {bold: true,sz: 16,} }if (key.indexOf('2') !== -1) {sheet[key].s.font = {sz: 14,} }}
})//导出
const workbook = XLSXS.utils.book_new();// 创建虚拟的 workbook
XLSXS.utils.book_append_sheet(workbook, sheet, 'sheet1'); // 向 workbook 中添加 sheet
const wbout = XLSXS.write(workbook, {bookType: 'xlsx', type: 'binary'});const blob = new Blob([s2ab(wbout)], {type: 'application/octet-stream'});FileSaver.saveAs(blob, 'sheet1.xlsx')//注意：定义导出 excel 的名称时需要加上后缀 .xlsxfunction s2ab (s) {const buf = new ArrayBuffer(s.length);const view = new Uint8Array(buf);for (let i = 8; i !== s.length; ++i){view[i] = s.charCodeAt(i) & 0xFF}return buf;}
}

使用xlsx-js-style表格导出，合计，单元格居中，多级表头合并，添加序号相关推荐

html如何取单元格内容,JS获取表格内指定单元格html内容的方法
JS获取表格内指定单元格html内容的方法本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组, ...
Python简单处理excel数据（拆分合并单元格、根据表头合并sheet、添加列数、添加内容操作）
简介:大量数据存于excel表中.利用python语言对按要求对存有数据的excel进行预处理,使其成为便于利用的整洁数据关键词:Python Excel openpyxl Pandas 问题描述: ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架...
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶......
2019独角兽企业重金招聘Python工程师标准>>> FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的 ...
xlsx-style使用(导出表格及修改单元格样式)
xlsx-style使用(导出表格及修改单元格样式) 针对导出表格需要与xlsx配合使用,通过xlsx的方法生成sheet对象然后在对象上修改样式本文对xlsx-style 如何修改单元格样式做了 ...
java excel单元格背景色,『excel表格尺寸设置』Java如何设置被导出excel单元格的样式？比如背景色，大小什么的？...
Java如何设置被导出excel单元格的样式?比如背景色,大小什么的? 使 poi ,具体实现 HSSFCellStyle style = null; // 创建表头style HSSFCellSty ...
Python 操作 excel 插入图片、表格、设置单元格颜色、字体（三）
Python 操作 excel 插入图片.表格.设置单元格颜色.字体 python 操作 excel 插入图片.表格.设置单元格颜色.字体提示:以下是本篇文章正文内容,下面案例可供参考一.open ...
自动化办公之excel教程（3）：数据编辑操作，表格的美化操作，应用表格样式和单元格样式，制作报销汇总单
一.数据编辑操作 1.填充数据填充数据见上一节自动化办公之EXCEL教程(2):各种数据的输入,自动填充数据,表格操作小技巧 2.查找和替换数据第一步:开始选项卡里找到查找或者Ctil+F 第 ...
如何给el-table表格的指定单元格设置颜色
一.需求及效果图最近的项目中,遇到给表格中指定单元格设置字体颜色,使用的是el-table做的,控制单元格字体颜色,每一行的最大值设置成绿色,最小值设置成红色,效果如下: 二.方法及代码使用的是控 ...

使用xlsx-js-style表格导出，合计，单元格居中，多级表头合并，添加序号

使用xlsx-js-style表格导出，合计，单元格居中，多级表头合并，添加序号相关推荐

最新文章

热门文章