纯前端导出excel

1.安装

pnpm install xlsx file-saver

 2.创建导出功能

<template>
  <div>
    <button @click="exportToExcel">导出为 Excel</button>
    <table ref="myTable" border="1">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>邮箱</th>
          <th>电话</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in tableData" :key="index">
          <td>{{ row.name }}</td>
          <td>{{ row.age }}</td>
          <td>{{ row.email }}</td>
          <td>{{ row.phone }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 25, email: 'alice@example.com', phone: '123-456-7890' },
        { name: 'Bob', age: 30, email: 'bob@example.com', phone: '098-765-4321' }
      ]
    };
  },
  methods: {
    exportToExcel() {
      // 获取表格元素
      const originalTable = this.$refs.myTable;

      // 创建一个临时的表格副本
      const tempTable = originalTable.cloneNode(true);

      // 移除空的 <tr> 标签
      const rows = tempTable.querySelectorAll('tr');
      rows.forEach(row => {
        if (row.children.length === 0 || Array.from(row.children).every(cell => cell.textContent.trim() === '')) {
          row.remove();
        }
      });

      // 移除隐藏的 <tr> 标签
      rows.forEach(row => {
        if (window.getComputedStyle(row).display === 'none') {
          row.remove();
        }
      });

      // 清理多余的换行符
      tempTable.innerHTML = tempTable.innerHTML.replace(/<tr>\s*<\/tr>/g, '');

      // 使用 xlsx 读取表格数据
      const workbook = XLSX.utils.table_to_book(tempTable, { sheet: 'Sheet1' });

      // 生成 Excel 文件并保存
      const excelBuffer = XLSX.write(workbook, {
        bookType: 'xlsx',
        type: 'array'
      });

      const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
      saveAs(blob, 'table_data.xlsx');

      // 清理临时表格
      tempTable.remove();
    }
  }
};
</script>