在vue3+TypeScrip中使用XLSX封装导出表格excel文件

最新推荐文章于 2024-07-28 22:48:50 发布

吃一碗粉只付一碗钱

最新推荐文章于 2024-07-28 22:48:50 发布

阅读量414

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CAthlete/article/details/137255020

版权

本文介绍了如何使用Vue3中的ProTable组件结合XLSX库，实现数据导出至Excel的功能。主要涉及Export函数，处理HTML数据获取表格结构，以及Computerdata和XLSXCreate函数用于生成和写入Excel文件。

摘要由CSDN通过智能技术生成

import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import * as XLSX from 'xlsx' // Vue3

const parser = new DOMParser();
const empty = void 0;
/**
 * @description 导出 入口函数
 * @author sigma
 * */
export function Export(proTable: ProTableInstance, columns: ColumnProps[], title: string) {
  // console.log(proTable)
  let model = proTable.element.$refs.bodyWrapper.innerHTML;
  const doc = parser.parseFromString(model, "text/html");
  const cell = doc.querySelectorAll(".el-tooltip");
  let props = columns.filter(el => {
    if (el.isShow) {
      return el.prop !== empty && el.type === empty && el.prop !== 'operation'
    }
  }).map(el => { return el.label; });
  let rows = Computerdata(cell, props);
  //设置表头序号
  props.unshift('序号');
  //设置表头
  let aoa = [props];
  if (model) {
    aoa = aoa.concat(rows);
  }
  else {
    aoa = [['暂无数据']]
  }
  XLSXCreate(aoa, title);
}
const Computerdata = (cell: NodeListOf<Element>, props: string[]) => {
  let newcell = [];
  let rows = [];
  let index = 0;
  cell.forEach((el) => {
    newcell.push(el.textContent)
    if (newcell.length == props.length) {
      index++;
      newcell.unshift(index);
      rows.push(newcell);
      newcell = [];
    }
  });
  return rows;
}
const XLSXCreate = (data: string[][], title: string) => {
  //创建sheet
  let worksheet = XLSX.utils.aoa_to_sheet(data);
  //创建表格文件
  let workbook = XLSX.utils.book_new();
  //插入表到表格第一页
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  //导出表格
  XLSX.writeFile(workbook, title + '.xlsx');
}
export default Export;

以上封装源码

1.其中Export是入口函数

参数介绍：Dom、列名集合、文件名

其中的逻辑可以根据自己的需求进行更改

2.Computerdata函数是excel数据体计算函数

参数介绍：数据体Dom、列名集合

这里主要是表头和数据体列数保持一致性，并返回数据集合

3.XLSXCreate函数就是xlsx的执行函数

参数介绍：数据体（包含表头数据）数据格式为二维数组、例如：[[表头]，[数据行]，....],

文件名