不走后端接口,前端导出excel表格

 

 1.下载

npm install xlsx

 2.HTML

<el-button type="primary" icon="Download" @click="handleExport">导出</el-button>

3.数据处理

import * as XLSX from 'xlsx';


//点击导出按钮调用该方法
function handleExport() {
  // 导出 Excel
  //wsImportantUseWaterInfoList.value是列表的数据
  exportToExcel(wsImportantUseWaterInfoList.value, '项目管理');
}
function exportToExcel(data1, filename = '项目管理') {
  // 格式化当前时间
  const formatTime = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份补零
    const day = String(now.getDate()).padStart(2, '0'); // 日期补零
    const hours = String(now.getHours()).padStart(2, '0'); // 小时补零
    const minutes = String(now.getMinutes()).padStart(2, '0'); // 分钟补零
    const seconds = String(now.getSeconds()).padStart(2, '0'); // 秒补零
    return `${year}-${month}-${day}_${hours}-${minutes}-${seconds}`;
  };

  // 添加时间到文件名
  const exportFilename = `${filename}_${formatTime()}.xlsx`;
  const data = data1.map(item => ({
    '名称': item.name,
    '年龄': item.age',
    '地址': item.address,
  }));
  // 创建工作表
  const ws = XLSX.utils.json_to_sheet(data);
  // 创建工作簿
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, '项目管理');
  // 导出文件
  XLSX.writeFile(wb, exportFilename);
}