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

link之家

链接快照平台

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

相关文章推荐

千年单身的生姜 · 多家企业呼吁“重拳出击”食品安全谣言-中国新闻网· 2 周前 ·

面冷心慈的熊猫 · 僵湖漫画人物介绍_头条· 1 年前 ·

耍酷的骆驼 · 聊聊斋_百度百科· 1 年前 ·

玩足球的筷子 · 【图】Model ...· 1 年前 ·

狂野的野马 · 广汽本田 ...· 1 年前 ·

< 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组件来显示用户友好的提示消息。
希望对你有所帮助！