vue3+elementUiPlus表格导出功能

1.下载需要的组件包

npm install file-saver xlsx

2.页面中导入

import FileSaver from 'file-saver'

import * as XLSX from 'xlsx';

3.页面中的表格加一个id

<el-table

:data="tableData"

ref="multipleTableRef"

style="width: 100%"

id="my-table">

为了方法连接

4. 导出按钮

<el-button type="primary" icon="download" @click="exportClick ">导出</el-button>

5.导出方法

javascript 复制代码

const exportClick = () => {
  var table = document.querySelector('#my-table');
  // 复制表格，不包括第一列和最后一列
  var clonedTable = table.cloneNode(true);
  clonedTable.querySelectorAll('tr').forEach(row => {
    var cells = row.cells;
    if (cells.length > 0) {
      // 删除每行的第一个单元格
      row.deleteCell(0);
      // 删除每行的最后一个单元格
      row.deleteCell(cells.length - 1);
    }
  });
  // 创建一个新的工作簿
  var wb = XLSX.utils.book_new();
  // 创建一个新的工作表
  var ws = XLSX.utils.table_to_sheet(clonedTable);
  // 调整每列的列宽以适应内容
  autoSizeColumns(ws);

  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

  // 导出工作簿
  const wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'binary',
    cellStyles: true, // 启用单元格样式
  });
  try {
    FileSaver.saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), '客户表.xlsx');
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout);
  }
};

6.将字符串转为数组

javascript 复制代码

// 将字符串转换为字节数组
function s2ab(s) {
  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;
}

7.计算最大列宽

javascript 复制代码

function autoSizeColumns(ws) {
  const range = XLSX.utils.decode_range(ws['!ref']);
  for (let C = range.s.c; C <= range.e.c; ++C) {
    let maxColWidth = 0;
    for (let R = range.s.r; R <= range.e.r; ++R) {
      const cellAddress = { c: C, r: R };
      const cellRef = XLSX.utils.encode_cell(cellAddress);
      const cell = ws[cellRef];
      if (cell && cell.v) {
        const cellText = cell.w || cell.v.toString();
        const cellWidth = cellText.length + 2; // 加 2 以适应列头和数据
        if (cellWidth > maxColWidth) {
          maxColWidth = cellWidth;
        }
      }
    }
    const colWidth = maxColWidth > 20 ? maxColWidth : 20; // 设置最小列宽
    const col = ws['!cols'][C];
    if (col) {
      col.wch = colWidth;
    } else {
      ws['!cols'][C] = { wch: colWidth };
    }
  }
}