56.vue3+vite+typescript+element-plus+setup语法糖实现el-table中的数据导出excel

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

细心的茶叶 · 活动预告 | 宏辞论道，以辩会友_反方_正方_观点· 1 年前 ·

强健的豆浆 · 对新出生婴儿办理出生登记-户籍管理-公安便民 ...· 1 年前 ·

不爱学习的跑步机 · 《赛马娘》皓月当空：秋皇帝高松宫大赛育成攻略 ...· 1 年前 ·

豪气的哑铃 · 看电影，学摄影？推荐3部视觉语言优秀的经典大 ...· 1 年前 ·

英俊的羊肉串 · 王的初拥_百度百科· 2 年前 ·

< script setup lang= "ts"> import { ref } from 'vue'; import { ElButton, ElMessage } from 'element-plus'; import XLSX from 'xlsx'; const data = ref([ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 } const exportExcel = ( ) => { const worksheet = XLSX. utils. json_to_sheet(data. value); const workbook = XLSX. utils. book_new(); XLSX. utils. book_append_sheet(workbook, worksheet, 'Sheet1'); XLSX. writeFile(workbook, 'data.xlsx'); ElMessage. success( '导出成功'); </ script> < style> </ style>

在你的页面中使用 ExportExcel 组件：

Copy Code

<template>
    <export-excel></export-excel>
  </div>
</template>
<script>
import ExportExcel from './ExportExcel.vue';
export default {
  components: {
    ExportExcel
</script>
<style>
</style>
这样，当你在页面中点击"导出Excel"按钮时，会将data中的数据导出为名为"data.xlsx"的Excel文件，并显示导出成功的提示消息。
以上代码是使用Vue 3的<script setup>语法糖来编写的，通过import引入相关组件和库，并使用ref来创建响应式数据。然后在exportExcel函数中，使用XLSX库将数据转换为Excel格式并保存为文件。最后，使用Element Plus的ElMessage组件来展示导出成功的提示消息。
这只是一个简单的示例，你可以根据实际需求进行调整和拓展。希望对你有帮助！
这段代码是一个名为exportExcel的箭头函数，它用于导出数据为Excel文件。
首先，我们创建一个名为worksheet的工作表，使用XLSX.utils.json_to_sheet方法将data.value中的数据转换为适用于Excel的工作表格式。
然后，我们创建一个名为workbook的工作簿，使用XLSX.utils.book_new方法创建一个新的工作簿。
接下来，我们使用XLSX.utils.book_append_sheet方法将之前创建的工作表worksheet添加到工作簿workbook中，并指定它的名称为'Sheet1'。
最后，我们使用XLSX.writeFile方法将工作簿保存为名为'data.xlsx'的Excel文件。
在导出成功后，使用Element Plus的ElMessage.success方法显示一个提示消息，内容为'导出成功'。
这段代码通过使用XLSX库来处理Excel相关操作，将数据转换为适用于Excel的格式，并保存为文件。同时使用Element Plus的ElMessage组件来显示用户友好的提示消息。
希望对你有所帮助！