首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue导出Excel文件

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

2025-12-19 08:53:18 作者：悟能不能悟

文章介绍了四种在Vue.js中导出Excel文件的方法,包括前端使用xlsx库、exceljs,使用现成组件vue-json-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
大数据量：后端生成

到此这篇关于Vue导出Excel文件的四种实现方式的文章就介绍到这了,更多相关Vue导出Excel文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！