vue3前端实现导出Excel功能

前端实现导出功能可以使用一些插件
我使用的是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>

tip:

• 数据格式：确保你的数据格式正确，以便能够正确的导出到excel文件中。
• 样式设置：如果你需要为Excel文件中的单元格设置样式，可以使用xlsx-style库。在设置样式时，需要了解xlsx-style库提供的样式选项。
• 大数据量处理：如果你的数据非常大，导出过程中时间会很长，需要增加提示来提升用户体验。

好了，以上就是全部代码啦，希望可以帮到你~

看到这如果对你有帮助的话，不如来一波点赞加关注吧~
感谢支持~
加个关注不迷路~~~~