ts导出表头带样式的xlsx文件

最新推荐文章于 2023-09-19 15:19:53 发布
最新推荐文章于 2023-09-19 15:19:53 发布
阅读量227 收藏 1
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39664116/article/details/132319208
版权

exportExcel.ts

import * as XLSX from 'xlsx';
import XLSXStyle from 'xlsx-style-vite';
/**
 *
 * @param list 表格数据[{ name: '凡凡',inNum: 10}]
 * @param headList 表头 [{name: '姓名',prop: 'name'},{name: '收入',children: [{name: '数量',prop: 'inNum'}]}],
 * @param sheetName 表名
 * @param hasHead 是否需要导出表头
 * 调用exportData(list, headList,sheetName);
 */
interface itemT {
  name: string;
  prop?: string;
  children?: { name: string; prop?: string }[];
}
export default function exportData(
  list: { [porp: string]: any }[],
  headList: itemT[],
  sheetName: string,
  hasHead: boolean
) {
  // if (!Array.isArray(list) || list.length < 1) {
  //   console.log('导出数据为空');
  //   return;
  // }
  //删除Children为空，不然数据对不上
  headList = deleteChildren(headList);
  // excel表头
  const excelHeader = hasHead ? buildHeader(headList) : [];
  // 头部行数，用来固定表头
  const headerRows = excelHeader.length;
  // 提取数据,当数据为空时只导出表头
  const dataList = !Array.isArray(list) || list.length < 1 ? [] : extractData(list, headList);
  excelHeader.push(...dataList, []);
  // 计算合并
  const merges = doMerges(excelHeader);
  // 生成sheet
  const ws = aoa_to_sheet(excelHeader, headerRows, hasHead) as any;
  // 单元格合并
  ws['!merges'] = merges;
  // 头部冻结
  ws['!freeze'] = {
    xSplit: '1',
    ySplit: '' + headerRows,
    topLeftCell: 'B' + (headerRows + 1),
    activePane: 'bottomRight',
    state: 'frozen',
  };
  // 设置行宽
  const arr = [];
  const num = excelHeader[0].length;
  // ws['!rows'] = [{
  //     hpx: 100
  // }]
  for (let i = 0; i < num; i++) {
    arr.push({
      wpx: 120,
    });
  }
  ws['!cols'] = arr;
  const workbook: { SheetNames: any; Sheets: any } = {
    SheetNames: [sheetName],
    Sheets: {},
  };
  workbook.Sheets[sheetName] = ws;
  // excel样式
  const wbout = XLSXStyle.write(workbook, { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true });
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
  openDownloadXLSXDialog(blob, sheetName + '.xlsx');
}

function buildHeader(revealList: any) {
  const excelHeader: any[] = [];
  // 构建生成excel表头需要的数据结构
  getHeader(revealList, excelHeader, 0, 0);
  // 多行表头长短不一，短的向长的看齐，不够的补上行合并占位符
  const max = Math.max(...excelHeader.map((a) => a.length));
  excelHeader.filter((e) => e.length < max).forEach((e) => pushRowSpanPlaceHolder(e, max - e.length));
  return excelHeader;
}
function getHeader(headers: string | any[], excelHeader: any[], deep: number, perOffset: number) {
  let offset = 0;
  let cur = excelHeader[deep];
  if (!cur) {
    cur = excelHeader[deep] = [];
  }
  // 填充行合并占位符
  pushRowSpanPlaceHolder(cur, perOffset - cur.length);
  for (let i = 0; i < headers.length; i++) {
    const head = headers[i];
    cur.push(head.name);
    // eslint-disable-next-line no-prototype-builtins
    if (head.hasOwnProperty('children') && Array.isArray(head.children) && head.children.length > 0) {
      const childOffset = getHeader(head.children, excelHeader, deep + 1, cur.length - 1);
      // 填充列合并占位符
      pushColSpanPlaceHolder(cur, childOffset - 1);
      offset += childOffset;
    } else {
      offset++;
    }
  }
  return offset;
}
/**
 * 根据选中的数据和展示的列，生成结果
 * @param list
 * @param revealList
 */
function extractData(list: any[], revealList: any) {
  // 列
  const headerList = flat(revealList);
  // 导出的结果集
  const excelRows: any[][] = [];
  // 如果有children集合的话会用到
  const dataKeys = new Set(Object.keys(list[0]));
  list.some((e: { children: string | any[] }) => {
    if (e.children && e.children.length > 0) {
      const childKeys = Object.keys(e.children[0]);
      for (let i = 0; i < childKeys.length; i++) {
        dataKeys.delete(childKeys[i]);
      }
      return true;
    }
  });
  flatData(list, (list: any) => {
    excelRows.push(...buildExcelRow(dataKeys, headerList, list));
  });
  return excelRows;
}
function buildExcelRow(mainKeys: Set<string>, headers: string | any[], rawDataList: string | any[]) {
  // 合计行
  const sumCols: string | any[] = [];
  // 数据行
  const rows = [];
  for (let i = 0; i < rawDataList.length; i++) {
    const cols = [];
    const rawData = rawDataList[i];
    // 提取数据
    for (let j = 0; j < headers.length; j++) {
      const header = headers[j];

      // 父元素键需要行合并
      if (rawData['rowSpan'] === 0 && mainKeys.has(header.prop)) {
        cols.push('!$ROW_SPAN_PLACEHOLDER');
      } else {
        let value;
        if (typeof header.exeFun === 'function') {
          value = header.exeFun(rawData);
        } else {
          value = rawData[header.prop];
        }
        cols.push(value);
        // 如果该列需要合计,并且是数字类型
        if (header['summable'] && typeof value === 'number') {
          sumCols[j] = (sumCols[j] ? sumCols[j] : 0) + value;
        }
      }
    }
    rows.push(cols);
  }

  return rows;
}

/**
 * 合并头部单元格
 **/
function doMerges(arr: string | any[]) {
  // 要么横向合并 要么纵向合并
  const deep = arr.length;
  const merges = [];
  for (let y = 0; y < deep; y++) {
    // 先处理横向合并
    const row = arr[y];
    let colSpan = 0;
    for (let x = 0; x < row.length; x++) {
      if (row[x] === '!$COL_SPAN_PLACEHOLDER') {
        row[x] = undefined;
        if (x + 1 === row.length) {
          merges.push({ s: { r: y, c: x - colSpan - 1 }, e: { r: y, c: x } });
        }
        colSpan++;
      } else if (colSpan > 0 && x > colSpan) {
        merges.push({ s: { r: y, c: x - colSpan - 1 }, e: { r: y, c: x - 1 } });
        colSpan = 0;
      } else {
        colSpan = 0;
      }
    }
  }
  // 再处理纵向合并
  const colLength = arr[0].length;
  for (let x = 0; x < colLength; x++) {
    let rowSpan = 0;
    for (let y = 0; y < deep; y++) {
      if (arr[y][x] === '!$ROW_SPAN_PLACEHOLDER') {
        arr[y][x] = undefined;
        if (y + 1 === deep) {
          merges.push({ s: { r: y - rowSpan, c: x }, e: { r: y, c: x } });
        }
        rowSpan++;
      } else if (rowSpan > 0 && y > rowSpan) {
        merges.push({ s: { r: y - rowSpan - 1, c: x }, e: { r: y - 1, c: x } });
        rowSpan = 0;
      } else {
        rowSpan = 0;
      }
    }
  }
  return merges;
}

/**
 * 从github复制过来的
 */
function aoa_to_sheet(data: string | any[], headerRows: number, hasHead: boolean) {
  const ws: any = {};
  const range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } };
  for (let R = 0; R !== data.length; ++R) {
    for (let C = 0; C !== data[R].length; ++C) {
      if (range.s.r > R) {
        range.s.r = R;
      }
      if (range.s.c > C) {
        range.s.c = C;
      }
      if (range.e.r < R) {
        range.e.r = R;
      }
      if (range.e.c < C) {
        range.e.c = C;
      }
      /// 这里生成cell的时候，使用上面定义的默认样式
      const cell: any = {
        v: data[R][C] || '',
        s: {
          font: {
            name: '宋体',
            sz: 10,
            bold: hasHead ? false : C % 2 ? false : true,
            color: {
              auto: 1,
            },
          },
          // border: {
          //   top: { style: 'thin', color: { rgb: '000000' } },
          //   left: { style: 'thin', color: { rgb: '000000' } },
          //   bottom: { style: 'thin', color: { rgb: '000000' } },
          //   right: { style: 'thin', color: { rgb: '000000' } },
          // },
          alignment: {
            /// 自动换行
            wrapText: 1,
            // 居中
            horizontal: 'center',
            vertical: 'center',
            indent: 0,
          },
        },
      };
      // 头部列表加边框
      if (R < headerRows) {
        // cell.s.border = {
        //   top: { style: 'thin', color: { rgb: '000000' } },
        //   left: { style: 'thin', color: { rgb: '000000' } },
        //   bottom: { style: 'thin', color: { rgb: '000000' } },
        //   right: { style: 'thin', color: { rgb: '000000' } },
        // };
        // cell.s.fill = {
        //   patternType: 'solid',
        //   // 背景颜色
        //   fgColor: { theme: 3, tint: 0.3999755851924192, rgb: 'ffffff' },
        //   bgColor: { theme: 7, tint: 0.3999755851924192, rgb: 'ffffff' },
        // };
        cell.s.font = {
          name: '宋体',
          sz: 10,
          bold: true,
          color: {
            rgb: '000',
          },
        };
      }
      const cell_ref = XLSX.utils.encode_cell({ c: C, r: R });
      if (typeof cell.v === 'number') {
        cell.t = 'n';
      } else if (typeof cell.v === 'boolean') {
        cell.t = 'b';
      } else {
        cell.t = 's';
      }
      ws[cell_ref] = cell;
    }
  }
  if (range.s.c < 10000000) {
    ws['!ref'] = XLSX.utils.encode_range(range);
  }
  return ws;
}
/**
 * 填充行合并占位符
 * */
function pushRowSpanPlaceHolder(arr: string[], count: number) {
  for (let i = 0; i < count; i++) {
    arr.push('!$ROW_SPAN_PLACEHOLDER');
  }
}
// 填充列合并占位符
function pushColSpanPlaceHolder(arr: string[], count: number) {
  for (let i = 0; i < count; i++) {
    arr.push('!$COL_SPAN_PLACEHOLDER');
  }
}
function flatData(list: string | any[], eachDataCallBack: { (list: any): void; (arg0: any[]): void }) {
  const resultList = [];
  for (let i = 0; i < list.length; i++) {
    const data = list[i];
    const rawDataList = [];
    // 每个子元素都和父元素合并成一条数据
    if (data.children && data.children.length > 0) {
      for (let j = 0; j < data.children.length; j++) {
        delete data.children[j].bsm;
        const copy = Object.assign({}, data, data.children[j]);
        rawDataList.push(copy);
        copy['rowSpan'] = j > 0 ? 0 : data.children.length;
      }
    } else {
      data['rowSpan'] = 1;
      rawDataList.push(data);
    }
    resultList.push(...rawDataList);
    if (typeof eachDataCallBack === 'function') {
      eachDataCallBack(rawDataList);
    }
  }
  return resultList;
}
function flat(revealList: any[]) {
  const result: any[] = [];
  revealList.forEach((e: { [x: string]: any; hasOwnProperty: (arg0: string) => any; children: any }) => {
    if (Object.prototype.hasOwnProperty.call(e, 'children')) {
      result.push(...flat(e.children));
    } else if (Object.prototype.hasOwnProperty.call(e, 'exeFun')) {
      result.push(e);
    } else if (Object.prototype.hasOwnProperty.call(e, 'prop')) {
      result.push(e);
    }
  });
  return result;
}
function s2ab(s: string) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i !== s.length; ++i) {
    view[i] = s.charCodeAt(i) & 0xff;
  }
  return buf;
}
// 下载文件
function openDownloadXLSXDialog(url: string | Blob | MediaSource, saveName: string) {
  if (typeof url == 'object' && url instanceof Blob) {
    url = URL.createObjectURL(url); // 创建blob地址
  }
  const aLink = document.createElement('a');
  aLink.href = url as string;
  aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
  let event;
  if (window.MouseEvent) {
    event = new MouseEvent('click');
  } else {
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  }
  aLink.dispatchEvent(event);
}
//去掉chidren为空的
function deleteChildren(arr: any) {
  const childs = arr;
  for (let i = childs.length; i--; i > 0) {
    if (childs[i].children) {
      if (childs[i].children.length) {
        deleteChildren(childs[i].children);
      } else {
        delete childs[i].children;
      }
    }
  }
  return arr;
}
qq_39664116
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3+ts+xlsx、xlsx-populate页面上显示表格并导出excel
Missxu1895的博客
06-03 44
要用到的就是xlsx-populate，用它生成和页面上显示的一样的样式并且导出。以上代码就是如何在页面上展示的表格，接下来要说的就是如何导出excel表格，且导出的excel表格内容与页面上一致。以及如何导出pdf格式的内容。页面上需要显示一个数据的excel表格，样式为固定左侧两列和表头（如下图所示），导出的时候结构也要和页面上是一致的。3.数据拿到了以后要处理一下，把拿到的表头数据添加到tableData中，便于td遍历。以上就是小编要分享的关于xlsx进行导出展示的内容啦～2.如何导出pdf格式。
表格导出使用xlsx-style-vite修改导出样式
最新发布
Gardent_的博客
03-12 583
最近项目需求让封装一个公共表格导出组件，项目是vue3+vite+ts搭建的，最初下载xlsx-style总是报错，查到有让改依赖解决报错问题的感觉不实用后续再次下载依赖还会出问题，靠扰了一天没有解决修改样式的问题，后续突然发现了xlsx-style-vite完美解决导出样式问题。
Qt的ts文件转换成excel文件
05-12
使用python将ts文件格式化为excel文件，使用方法，将需要操作的ts文件改名为en2zh.ts，置于exe同级目录下，执行exe即可，输出文件为en2zh.xlsx。 ****** 注：如有定制化处理需求，或者任何相关问题可通过邮箱联系本人 ykun089@163.com *****
vue3 + ts 导入.xlsx并读取数据
weixin_46181037的博客
09-07 592
1、先安装插件 xlsx。
Qt翻译文件转Excel处理小工具 Qt ts文件转Excel处理小工具
lxj362343的博客
02-24 2044
https://www.jianshu.com/p/324c05be9d55 https://github.com/Longxr/TSFileEditor
ts html导出excel,用Angular2在客户端导入导出Excel
weixin_36317317的博客
06-20 394
原标题：用Angular2在客户端导入导出Excel本文为Wijmo5 FlexGrid教程系列文章的最后一篇文章，在最后一篇文章里，我们将会为大家介绍如何使用Angular2在客户端实现导入导出Excel。实现方法可以使用xlsx.js库来完成导入导出，仅仅使用Java或是Type(不是服务器端代码)实现Excel文件的导入导出。 为了给Wijmo flexgrid添加客户端的导入导出功能，需要...
vue+TS + xlsx +ant-design-vue 解析excel文件数据
杨勇博客之家
07-17 1864
历史文章目录连接：https://blog.csdn.net/yy763496668/article/details/113117040此链接为CSDN连接，目的为方便大家一览博客目录！内...
导出带有图片xlsx的js插件
12-20
这个"导出带有图片xlsx的js插件"就是专门为了解决在JavaScript环境中创建包含图片的Excel（xlsx）文件而设计的。 该插件的核心功能是允许开发者在生成的Excel文件中嵌入图像，这对于数据报告、数据分析或者用户...
xlsx-js-style导出Demo,纯前端带样式导出表格数据
09-01
纯前端导出,xlsx.js只能导出不能携带样式，所以我们用了xlsx-js-style插件,可以实现带样式的前端导出表格,样式可自定义，表格背景颜色、字体颜色、表格行高、表格行宽等等都可以自行设置，导出速度快，实现可以自己...
vue导出excel并修改表头样式
10-29
在Vue.js应用中导出Excel并修改表头样式...通过以上步骤，你可以实现Vue应用中导出带有自定义表头样式的Excel文件。在实际项目中，你可能还需要考虑错误处理、数据过滤和格式化等细节，以确保功能的完整性和用户体验。
Excel文件(xlsx)导出json文件
02-05
Excel文件(xlsx)导出json文件 Excel文件(xlsx)导出json文件 Excel文件(xlsx)导出json文件 Excel文件(xlsx)导出json文件 Excel文件(xlsx)导出json文件 Excel文件(xlsx)导出json文件 Excel文件(xlsx)导出json文件 ...
qt翻译文件与Execl互转工具
04-02
qt开发中需要国际化，即需要.ts文件，当时ts文件的编辑就很麻烦，要是能转成execl表格展现编辑就好了，对！这个工具就是干这活的，可以相互转换。
Qt翻译文件与excel互转工具
11-03
本软件是Qt翻译文件转换工具，可以完成ts与excel的互相转换，转换后的文件可以用Qt自带的Linguist正常查看使用。
导出CVS（excel） ts（js）代码案例
04-17
导出cvs (excel) 的ts 代码 如果需要用作js代码 需要修改里面变量的修饰词
使用xlsx-style插件创建带样式的excel文件
04-13
使用xlsx-style插件创建带样式的excel文件，具体操作步骤见博客。 https://mp.csdn.net/mp_blog/creation/editor?spm=1010.2135.3001.5352
excel转ts代码
wulong710的专栏
09-01 737
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.ComponentModel; using System.Data; //using System.Drawing; //using System.Windows.Forms; using System.Collections; using System.Data.OleDb; using System.IO.
前端(vue/js)下载文件(xlsx、ts等格式)
weixin_44242897的博客
09-14 847
// 下载文件 // obj是调用接口拿到的数据,name是文件名,suffix是格式后缀 export function downloadFile(obj, name, suffix) { const url = window.URL.createObjectURL(new Blob([obj])) const link = document.createElement('a') link.style.display = 'none' link.href = url const fi
TS 实现Excel 导出功能
weixin_42946131的博客
09-19 376
typescript 实现Excel导出
vue3 + ts 导出excel
weixin_59167537的博客
11-15 2774
导出excel
vue3导出xlsx并自定义表头和样式
04-19
可以使用第三方库"xlsx"来导出xlsx文件，并通过设置表头和样式来自定义导出的文件。具体实现步骤如下： 1. 安装"xlsx"库： ```javascript npm install xlsx --save ``` 2. 导入"xlsx"库和数据： ```javascript import XLSX from 'xlsx'; const data = [ { name: "张三", age: 18, sex: "男" }, { name: "李四", age: 20, sex: "女" }, { name: "王五", age: 22, sex: "男" } ]; ``` 3. 定义表头和样式： ```javascript const headers = ["姓名", "年龄", "性别"]; const styles = { header: { fill: { fgColor:{rgb:"EDEDED"} }, font: { color: { rgb: "000000" }, bold: true } }, cell: { font: { sz: 14 } } } ``` 4. 定义导出文件的格式和文件名： ```javascript const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'; const fileExtension = '.xlsx'; const fileName = '用户信息表'; ``` 5. 将数据转换为表格： ```javascript const worksheet = XLSX.utils.json_to_sheet(data); ``` 6. 设置表头和样式： ```javascript worksheet["A1"].v = headers[0]; worksheet["B1"].v = headers[1]; worksheet["C1"].v = headers[2]; worksheet["A1"].s = styles.header; worksheet["B1"].s = styles.header; worksheet["C1"].s = styles.header; let range = XLSX.utils.decode_range(worksheet["!ref"]); for(let i = 1; i <= range.e.r; i++) { let ref = XLSX.utils.encode_col(0) + i; worksheet[ref].s = styles.cell; ref = XLSX.utils.encode_col(1) + i; worksheet[ref].s = styles.cell; ref = XLSX.utils.encode_col(2) + i; worksheet[ref].s = styles.cell; } ``` 7. 将表格增加到工作簿中： ```javascript const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); ``` 8. 导出xlsx文件： ```javascript const file = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' }); let blob = new Blob([file], {type: fileType}); saveAs(blob, fileName + fileExtension); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值