Vue导出Excel文件的四种实现方式

npm install xlsx
# 或
yarn add xlsx

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

<script>
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' }
      ]
    }
  },
  methods: {
    exportExcel() {
      // 创建工作簿
      const wb = XLSX.utils.book_new();
      
      // 创建工作表
      const ws = XLSX.utils.json_to_sheet(this.tableData);
      
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      
      // 导出文件
      XLSX.writeFile(wb, '用户数据.xlsx');
    }
  }
}
</script>

npm install exceljs
npm install file-saver

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

async exportExcel() {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet1');
  
  // 添加表头
  worksheet.columns = [
    { header: '姓名', key: 'name' },
    { header: '年龄', key: 'age' },
    { header: '城市', key: 'city' }
  ];
  
  // 添加数据
  this.tableData.forEach(item => {
    worksheet.addRow(item);
  });
  
  // 保存文件
  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
  });
  saveAs(blob, '用户数据.xlsx');
}

npm install vue-json-excel

<template>
  <download-excel
    :data="tableData"
    :fields="jsonFields"
    name="用户数据.xlsx"
  >
    <button>导出Excel</button>
  </download-excel>
</template>

<script>
import JsonExcel from 'vue-json-excel';

export default {
  components: {
    'download-excel': JsonExcel
  },
  data() {
    return {
      tableData: [...],
      jsonFields: {
        '姓名': 'name',
        '年龄': 'age',
        '城市': 'city'
      }
    }
  }
}
</script>

// 前端调用
exportExcel() {
  axios({
    url: '/api/export/excel',
    method: 'GET',
    responseType: 'blob'  // 重要：接收文件流
  }).then(response => {
    const blob = new Blob([response.data], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'data.xlsx';
    link.click();
    window.URL.revokeObjectURL(url);
  });
}

exportTable() {
  const table = document.querySelector('#your-table');
  const wb = XLSX.utils.table_to_book(table);
  XLSX.writeFile(wb, '表格数据.xlsx');
}