Vue3中Excel导出的性能优化与实战指南

// 内存友好的分块处理
async function chunkedExport(data, fileName, chunkSize = 5000) {
  const wb = utils.book_new();
  const ws = utils.aoa_to_sheet([]); // 初始化空工作表
  
  // 分块处理数据
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    utils.sheet_add_aoa(ws, chunk, { origin: -1 }); // 追加数据
    await new Promise(resolve => requestIdleCallback(resolve)); // 不阻塞UI
  }
  
  utils.book_append_sheet(wb, ws, "数据");
  writeFile(wb, fileName, { compression: true });
}

// 创建带样式的复杂表格
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('销售报表');

// 设置专业样式
worksheet.columns = [
  { header: '订单号', width: 20, style: { font: { bold: true } } },
  { header: '金额', width: 15, style: { numFmt: '¥#,##0.00' } }
];

// 添加带条件格式的数据
data.forEach(item => {
  worksheet.addRow(item).eachCell(cell => {
    if (cell.value > 10000) {
      cell.fill = { type: 'pattern', fgColor: { argb: 'FFFF00' } };
    }
  });
});

// 生成文件
const buffer = await workbook.xlsx.writeBuffer();
saveAs(new Blob([buffer]), '专业报表.xlsx');

// 服务端代码（Node.js + Express）
app.post('/export', async (req, res) => {
  // 设置流式响应头
  res.writeHead(200, {
    'Content-Type': 'application/octet-stream',
    'Content-Disposition': 'attachment; filename=大数据导出.xlsx'
  });
  
  const workbook = new ExcelJS.stream.xlsx.WorkbookWriter({
    stream: res,
    useStyles: false // 关闭样式提升30%性能
  });
  
  const worksheet = workbook.addWorksheet('数据');
  
  // 模拟数据库流式查询
  const dataStream = getDataFromDatabaseAsStream();
  
  dataStream.on('data', (chunk) => {
    worksheet.addRow(chunk).commit(); // 逐行提交
  });
  
  dataStream.on('end', () => {
    worksheet.commit();
    workbook.commit();
  });
});

<template>
  <div v-if="exportProgress !== null">
    <div class="progress-bar">
      <div :style="{ width: `${exportProgress}%` }"></div>
    </div>
    <p>正在导出... {{ exportProgress }}%</p>
    <p v-if="exportProgress > 80">文件生成中，请勿关闭页面</p>
  </div>
</template>

<script setup>
const exportProgress = ref(null);

const exportData = async () => {
  exportProgress.value = 0;
  
  // 模拟分块处理
  for (let i = 0; i < 100; i++) {
    exportProgress.value = i;
    await processChunk(data.slice(i * 100, (i + 1) * 100));
    await nextTick(); // 确保UI更新
  }
  
  exportProgress.value = null;
};
</script>

<button @click="exportData">
  导出Excel 
  <small>(约{{ estimateTime }}秒)</small>
</button>

function smartExport(data) {
  if (data.length > 50000) {
    if (confirm('数据量较大，推荐使用后端导出。继续在前端处理吗？')) {
      return optimizedFrontendExport(data);
    } else {
      return backendExport(data);
    }
  }
  return defaultExport(data);
}

const startTime = performance.now();

try {
  await exportData();
  const duration = performance.now() - startTime;
  analytics.track('ExportPerformance', { duration, rows: data.length });
} catch (error) {
  logError(error);
}