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

相关文章推荐

狂野的松树 · Python使用ElementTree处理X ...· 1 月前 ·

英姿勃勃的山羊 · 解析 xml 文件 - xml.etree ...· 1 月前 ·

满身肌肉的领带 · jsoup HTML Parsing ...· 1 月前 ·

体贴的松树 · js全屏，监听页面是否全屏_js监听全屏事件· 1 月前 ·

暗恋学妹的鸵鸟 · matlab替换矩阵某一行某一列的元素-掘金· 1 年前 ·

焦虑的书签 · 学习如何用 C 语言来进行文件输入输出操作 ...· 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组件来显示用户友好的提示消息。
希望对你有所帮助！