elementplus下载表格为excel格式

1. 安装xlsx

npm i --save https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz

2. 引入xlsx并使用

import XLSX from 'xlsx';

const tableRef = ref<any>(null);
// 导出为 Excel
const exportToExcel = () => {
  // 获取 el-table 的引用
  tableRef.value = tableRef.value || document.querySelector('.el-table');

  // 将 el-table 数据转换为二维数组
  const dataArray = [];
  const headers: any = [];
  tableRef.value.querySelectorAll('.el-table__header-wrapper th').forEach((th: any) => {
    headers.push(th.textContent.trim());
  });
  dataArray.push(headers);

  tableRef.value.querySelectorAll('.el-table__body-wrapper tbody tr').forEach((row: any) => {
    const rowData: any = [];
    row.querySelectorAll('td').forEach((cell: any) => {
      rowData.push(cell.textContent.trim());
    });
    dataArray.push(rowData);
  });


  // 创建一个新的工作簿
  const workbook = XLSX.utils.book_new();

  // 创建一个新的工作表
  const worksheet = XLSX.utils.aoa_to_sheet(dataArray);

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  // 将工作簿保存为 Excel 文件
  XLSX.writeFile(workbook, '学科分数分布统计.xlsx');
};

补充：html

<template>
  <div class="tableList">
    <p>统计p>
    <el-button @click="exportToExcel">导出为Excelel-button>
    <el-table :data="tableData" border :header-cell-style="headerCellStyle" stripe :cell-style="cellStyle">
      <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label">
      el-table-column>
    el-table>
  div>
template>

表格样式设计

const headerCellStyle = {
  'background-color': '#bdd7ff',
  'borderColor': '#fff',
  'font-weight': 'normal',
  'text-align': 'center',
  'height': '60px'
};

const cellStyle = {
  'borderColor': '#fff',
  'text-align': 'center'
};