vue3 导出表格，合并单元格，设置单元格宽度，文字居中，修改文字颜色

导出效果 

 

下载插件

npm下载   npm install xlsx xlsx-js-style

yarn下载   yarn add xlsx xlsx-js-style

 导入插件

import * as XLSX from "xlsx"; // Vue3 版本

import XLSXStyle from "xlsx-js-style"; // 表格样式插件

数据导出处理

// 导出
function getExport(row: any) {// console.log("数组", row.details);// 表格let data = [[row.reports_name], [null, null], ["摘要", null]] as any;// 合并单元格let mergeCells = [{ s: { r: 1, c: 0 }, e: { r: 1, c: 1 } },{ s: { r: 2, c: 0 }, e: { r: 2, c: 1 } },] as any;// 循环下标let Xindex = 2 as number;let Yindex = 2 as number;// 设置单元格宽度，需要每一列设置let wscols = [{ wch: 10 }, { wch: 15 }] as any;// 设置单元格高度，需要每一行设置let wsrows = [{ hch: 50 }] as any;// 设置居中字体颜色样式let centerStyle = {//字体设置font: {sz: 13,bold: false, //加粗color: {rgb: "ff190e", //十六进制，不带#},},alignment: {horizontal: "center",vertical: "center",wrap_text: true, //文本自动换行},};// 循环数据row.details.forEach((item: any, i1: number) => {// console.log(item);item.child.forEach((item2: any, i2: number) => {// 头部数据if (i2 == 0) {data[1].push(item.enterprises_name);if (item.child.length > 1) {mergeCells.push({s: { r: 1, c: item.child.length + Xindex - 1 },e: { r: 1, c: Xindex },});Xindex += item.child.length;} else {Xindex++;}} else {data[1].push(null);}wscols.push({ wch: 15 }); // 添加每列data[2].push(item2.bank_name);// 下面数据item2.detail.forEach((item3: any, i3: number) => {item3.data.forEach((item4: any, i4: number) => {if (i3 == 0) {Yindex = 2;// wsrows.push({ hch: 30 }); // 添加每行}Yindex++;if (i1 == 0 && i2 == 0) {data[Yindex] = [];data[Yindex].push(item3.title);data[Yindex].push(item4.types_title || null);// 合并表格if (item3.data.length == 1 && i3 < item2.detail.length) {// 横合并mergeCells.push({s: { r: Yindex, c: 0 },e: { r: Yindex, c: 1 },});}if (item3.data.length > 1 && i3 < item2.detail.length && i4 == 0) {// 竖合并mergeCells.push({s: { r: Yindex, c: 0 },e: { r: Yindex + item3.data.length - 1, c: 0 },});}}data[Yindex].push(item4.amonut);});});});});// 添加合计数据data[Yindex + 1] = ["合计", null, row.total_amount];// 合并最后合计的单元格mergeCells.push({ s: { r: Yindex + 1, c: 0 }, e: { r: Yindex + 1, c: 1 } });mergeCells.push({s: { r: Yindex + 1, c: 2 },e: { r: Yindex + 1, c: Xindex - 1 },});mergeCells.unshift({s: { r: 0, c: 0 },e: { r: 0, c: Xindex },});// console.log(data);// console.log(mergeCells);// console.log(wsrows);const worksheet = createSheet(data, mergeCells);worksheet["!cols"] = wscols; // 设置列宽worksheet["!rows"] = wsrows; // 设置行高// 应用样式到所有单元格var range = XLSXStyle.utils.decode_range(worksheet["!ref"]);for (var R = range.s.r; R <= range.e.r; ++R) {for (var C = range.s.c; C <= range.e.c; ++C) {var cell_address = { c: C, r: R };var cell_ref = XLSXStyle.utils.encode_cell(cell_address);if (!worksheet[cell_ref]) continue; // 如果单元格不存在则跳过worksheet[cell_ref].s = centerStyle; // 应用样式}}// 创建一个工作簿const workbook = XLSXStyle.utils.book_new();// 将工作表添加到工作簿XLSXStyle.utils.book_append_sheet(workbook, worksheet, "出纳日报");// 生成Excel文件XLSXStyle.writeFile(workbook, "出纳日报数据.xlsx");
}
// 将数据转换为工作表对象
function createSheet(data, mergeCells) {const ws = XLSX.utils.aoa_to_sheet(data); // 将二维数组转换为工作表if (mergeCells && mergeCells.length > 0) {ws["!merges"] = mergeCells; // 设置合并单元格}return ws;
}

里面包含设置行高的代码没有生效，是因为需要修改插件里面的代码，可以查看其他文章修改