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

注意事项

1. 数据量大时：建议使用后端导出，避免浏览器内存溢出

2. 格式化处理：日期、数字等特殊格式需要转换

3. 样式需求：如需复杂样式，建议使用 exceljs

4. 兼容性：xlsx 库兼容性较好，支持多种格式

推荐方案：

• 简单场景：使用 xlsx 库

• 需要样式和复杂功能：使用 exceljs

• 大数据量：后端生成