How to export data to Excel in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Exporting data to Excel format is essential for Vue applications that handle business data, reports, and analytics features. As the creator of CoreUI with over 11 years of Vue development experience since 2014, I’ve implemented Excel export functionality in countless enterprise dashboards. The most effective solution is to use the xlsx library (SheetJS) to create Excel files with proper formatting and multiple sheets. This approach provides full control over spreadsheet structure and works entirely client-side.
Use the xlsx library to export data to Excel in Vue 3.
<template>
<button @click='exportToExcel'>Export to Excel</button>
</template>
<script>
import { ref } from 'vue'
import * as XLSX from 'xlsx'
export default {
setup() {
const data = ref([
{ id: 1, name: 'John Doe', email: '[email protected]', salary: 50000 },
{ id: 2, name: 'Jane Smith', email: '[email protected]', salary: 60000 },
{ id: 3, name: 'Bob Johnson', email: '[email protected]', salary: 55000 }
])
const exportToExcel = () => {
const worksheet = XLSX.utils.json_to_sheet(data.value)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Employees')
XLSX.writeFile(workbook, 'employees.xlsx')
}
return { exportToExcel }
}
}
</script>
First, install the xlsx library with npm install xlsx. The json_to_sheet() function converts your data array to an Excel worksheet, automatically creating headers from object keys. A new workbook is created with book_new(), and the worksheet is added with a custom sheet name. The writeFile() function triggers the browser download with the specified filename. The library handles all Excel formatting, data types, and file generation automatically.
Best Practice Note
This is the same Excel export approach we use in CoreUI Vue data tables for business reporting. For advanced formatting like cell styles, colors, or formulas, use the xlsx library’s cell formatting options. Consider adding a loading indicator for large datasets as file generation can take a moment.
