Vue2.0 element el-table导出excel的详细过程

2023-12-27 20:08:18

安装sheetjs

首先，我们需要在项目中安装sheetjs库。我们可以使用以下命令来安装：

npm install sheetjs

生成excel文件结构

在安装了sheetjs库之后，我们就可以使用它来生成excel文件结构。我们可以使用以下代码来生成一个简单的excel文件结构：

const wb = new Workbook();
const ws = wb.addWorksheet('Sheet1');
ws.getCell('A1').value = 'Hello World!';

导出el-table数据到excel

现在，我们就可以将el-table的数据导出到excel中了。我们可以使用以下代码来导出el-table的数据：

const elTable = document.querySelector('.el-table');
const wb = new Workbook();
const ws = wb.addWorksheet('Sheet1');

// 获取el-table的表头
const tableHeaders = elTable.querySelectorAll('.el-table__header-cell');

// 将表头添加到excel中
tableHeaders.forEach((header, index) => {
  ws.getCell(`A${index + 1}`).value = header.textContent;
});

// 获取el-table的数据
const tableData = elTable.querySelectorAll('.el-table__body-wrapper .el-table__body tr');

// 将数据添加到excel中
tableData.forEach((row, index) => {
  const cells = row.querySelectorAll('.el-table__cell');
  cells.forEach((cell, cellIndex) => {
    ws.getCell(`${String.fromCharCode(65 + cellIndex)}${index + 2}`).value = cell.textContent;
  });
});

// 将excel文件保存到本地
XLSX.writeFile(wb, 'table.xlsx');