写一个vue3具有导出Excel表格功能的组件
时间: 2023-10-23 17:08:24 浏览: 43
以下是一个简单的 Vue3 组件,它具有导出 Excel 表格功能:
```vue
<template>
<div>
<button @click="exportToExcel">导出 Excel</button>
</div>
</template>
<script>
import { ref } from 'vue'
import XLSX from 'xlsx'
export default {
name: 'ExportExcel',
setup() {
const tableData = ref([
// 表格数据
])
const exportToExcel = () => {
const worksheet = XLSX.utils.json_to_sheet(tableData.value)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
XLSX.writeFile(workbook, 'table.xlsx')
}
return {
tableData,
exportToExcel
}
}
}
</script>
```
在这个组件中,我们使用了 `ref` 来创建响应式的表格数据,并且引入了 `xlsx` 库来处理 Excel 文件。当用户点击按钮时,我们将表格数据转换为工作表,然后将其添加到工作簿中,并将工作簿写入文件中。这个组件可以根据需要进行扩展,以支持更复杂的表格和导出选项。