先下载插件
npm install xlsx --save<template> <el-table v-loading="loading" element-loading-text="数据加载中..." :data="tableData" class="tabBox-style" > <el-table-column v-for="(item, index) in tabListProp" :key="index" :prop="item.label" :label="item.value" ></el-table-column> <el-table-column label="操作" align="center"> <template #default="scope"> </template> </el-table-column> </el-table> <div class="export" @click="exportTableToExcel"> <img src="@/assets/images/equipmentInfo/export.png" alt="" /> <div>导出数据</div> </div> </template> <script setup> /* element样式 */ import { ElMessage } from "element-plus"; /* excel */ import * as XLSX from "xlsx"; /* 表格Ref引用（用于获取表格DOM） */ const tableRef = ref(null); /* 导出表格数据为Excel */ const exportTableToExcel = () => { if (!tableData.value.length) { ElMessage.warning("暂无数据可导出"); return; } try { // 1. 处理数据：将表格数据转换为Excel所需格式（匹配表头） const exportData = tableData.value.map((row) => { const newRow = {}; tabListProp.value.forEach((item) => { newRow[item.value] = row[item.label] || "-"; // 无数据时显示"-" }); return newRow; }); // 2. 创建工作簿和工作表 const ws = XLSX.utils.json_to_sheet(exportData); // JSON转工作表 const wb = XLSX.utils.book_new(); // 新建工作簿 XLSX.utils.book_append_sheet(wb, ws, "设备数据"); // 将工作表添加到工作簿 // 3. 生成并下载Excel文件 const fileName = `设备数据_${new Date().getTime()}.xlsx`; // 文件名（加时间戳避免重复） XLSX.writeFile(wb, fileName); ElMessage.success("Excel导出成功"); } catch (error) { ElMessage.error("Excel导出失败：" + (error.message || "未知错误")); console.error("导出失败详情：", error); } }; </script>
