当前位置：首页 > article >正文

vue3前端实现导出Excel功能

article 2025/8/13 14:54:57

前端实现导出功能可以使用一些插件
我使用的是xlsx库
1.首先我们需要在vue3的项目中安装xlsx库。可以使用npm 或者 pnpm来进行安装

npm install xlsx

或者

pnpm install xlsx

2.在vue组件中引入xlsx库

import * as XLSX from 'xlsx';

3.定义导出实例方法

const exportExcel = () => {// 准备要导出的数据，这里假设你的数据存储在dataArray中const dataArray = [{ name: 'John', age: 30, address: 'New York' },{ name: 'Jane', age: 25, address: 'London' },{ name: 'Mike', age: 32, address: 'San Francisco' },];// 将数据转换为工作表const ws = XLSX.utils.json_to_sheet(dataArray);// 创建一个新的工作簿，并将工作表添加到工作簿中const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');// 导出为Excel文件// 如果需要设置样式，则使用XLSXStyle.writeFile(wb, '文件名.xlsx');XLSX.writeFile(wb, '表格数据.xlsx');
}

完整代码演示

<template><div><button @click="exportExcel">导出Excel</button><!-- 你可以在这里添加其他内容，如表格等 --></div>
</template>
<script setup>
import { ref } from 'vue';
import * as XLSX from 'xlsx';const exportExcel = () => {// 准备要导出的数据，这里假设你的数据存储在dataArray中const dataArray = [{ name: 'John', age: 30, address: 'New York' },{ name: 'Jane', age: 25, address: 'London' },{ name: 'Mike', age: 32, address: 'San Francisco' },];//需要注意的是，这样导出来的数据表头显示的是name,age,address，并不是中文，如果想要中文的话需要做一下处理const data = []var titlist = ['名称','年龄','时间',]data.push(titlist)exportExcel .value.forEach((item) => {var itemArr = [item.name,item.age,item.address,]data.push(itemArr)})// 将数据转换为工作表const ws = XLSX.utils.json_to_sheet(data);// 创建一个新的工作簿，并将工作表添加到工作簿中const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');// 导出为Excel文件// 如果需要设置样式，则使用XLSXStyle.writeFile(wb, '文件名.xlsx');XLSX.writeFile(wb, '表格数据.xlsx');
};
</script>