elementplus下载表格为excel格式

1. 安装xlsx

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

2. 引入xlsx并使用

import XLSX from 'xlsx';
1

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');
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

补充：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>
1
2
3
4
5
6
7
8
9
10

表格样式设计

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

const cellStyle = {
  'borderColor': '#fff',
  'text-align': 'center'
};
1
2
3
4
5
6
7
8
9
10
11
12

3、多级表头导出

// 导出为 Excel
const exportMergedCellsToExcel = () => {
  const table = document.querySelector('#table-export') as HTMLTableElement;
  // 创建一个新的工作簿
  let wb = XLSX.utils.book_new();
  // 获取表格的表头table
  let tableHead = table.getElementsByTagName("TABLE")[0]
  // 获取表格的表体
  let tableBody = table.getElementsByTagName("TABLE")[1].getElementsByTagName("TBODY")[0]
  // 将表体添加到表头table中
  tableHead.appendChild(tableBody)
  // 创建一个新的工作表
  let ws = XLSX.utils.table_to_sheet(tableHead);
  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  // 将工作簿保存为 Excel 文件
  XLSX.writeFile(wb, '总分均分统计.xlsx');
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18