vue导出excel文件

Vue.js 本身不提供直接导出 Excel 的功能，但可以通过以下几种方式实现：

1. 前端导出方案

使用 xlsx 库（推荐）

复制代码

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>

使用 exceljs（功能更强大）

复制代码

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');
}

2. 使用现成组件

vue-json-excel

复制代码

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>

3. 后端生成方案

如果数据量大或需要复杂格式，建议后端生成：

复制代码

// 前端调用
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);
  });
}

4. 简单表格导出

复制代码

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

注意事项

数据量大时：建议使用后端导出，避免浏览器内存溢出
格式化处理：日期、数字等特殊格式需要转换
样式需求：如需复杂样式，建议使用 exceljs
兼容性：xlsx 库兼容性较好，支持多种格式

推荐方案：

简单场景：使用 xlsx 库
需要样式和复杂功能：使用 exceljs
大数据量：后端生成