Vue使用xlsx组件轻松实现Excel导出的完整代码

npm install xlsx file-saver --save

<template>
  <button @click="exportExcel">导出Excel</button>
</template>

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

export default {
  methods: {
    exportExcel() {
      // 示例数据
      const data = [
        ['姓名', '年龄', '部门'],
        ['张三', 28, '技术部'],
        ['李四', 32, '产品部']
      ];
      
      // 创建工作簿
      const ws = XLSX.utils.aoa_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, '员工信息');
      
      // 生成文件并保存
      const buffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([buffer], { type: 'application/octet-stream' });
      saveAs(blob, '员工列表.xlsx');
    }
  }
}
</script>

// 对象数组转换（自动匹配表头）
const employees = [
  { name: '王五', age: 25, department: '设计部' },
  { name: '赵六', age: 30, department: '市场部' }
];

const ws = XLSX.utils.json_to_sheet(employees);

const ws1 = XLSX.utils.aoa_to_sheet(/* 数据源1 */);
const ws2 = XLSX.utils.aoa_to_sheet(/* 数据源2 */);

const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws1, '第一季度');
XLSX.utils.book_append_sheet(wb, ws2, '第二季度');

// 设置列宽
ws['!cols'] = [{ width: 20 }, { width: 15 }, { width: 25 }];

// 添加标题样式
const titleCell = { v: '员工统计表', s: { font: { bold: true, sz: 18 }, alignment: { horizontal: 'center' } } };

// 使用Web Worker处理百万级数据
const worker = new Worker('./excel.worker.js');
worker.postMessage(largeData);

let currentPage = 1;
const pageSize = 10000;

function exportByPage() {
  const pageData = getData(currentPage, pageSize);
  // 追加到现有文件...
  currentPage++;
}

// 使用Stream模式处理文件
const writer = XLSX.stream.to_csv(wb, { FS: ',' });
const readable = new ReadableStream({ ... });

saveAs(blob, '\uFEFF' + encodeURIComponent('中文名称.xlsx'));

// 转换日期为Excel数字格式
XLSX.SSF.format('yyyy-mm-dd', new Date());

// IE兼容处理
if (window.navigator.msSaveBlob) {
  navigator.msSaveBlob(blob, filename);
}