elementui+vue3+sheetjs导出excel

Element UI是一套基于Vue.js的组件库，而SheetJS是一个用于读写Excel文件的JavaScript库。如果想在Vue 3中使用Element UI和SheetJS来导出Excel文件，可以按照以下步骤进行：

首先，安装Element UI和SheetJS的依赖包。可以通过npm或yarn来安装这两个库。

npm install element-ui sheetjs

接下来，在Vue的入口文件（main.js）中引入Element UI和SheetJS，并将其注册为全局组件。

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import * as XLSX from 'xlsx'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.config.globalProperties.$xlsx = XLSX

app.mount('#app')

然后，在需要导出Excel的组件中，可以使用Element UI的按钮组件来触发导出操作。

<template>
  <div>
    <el-button @click="exportExcel">导出Excel</el-button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  methods: {
    exportExcel() {
      const worksheet = XLSX.utils.aoa_to_sheet([['Hello', 'World']])
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
      XLSX.writeFile(workbook, 'example.xlsx')
    }
  }
}
</script>

在上面的示例代码中，我们在exportExcel方法中创建了一个SheetJS的工作表（worksheet），然后将其添加到工作簿（workbook）中，并将其写入一个名为"example.xlsx"的文件中。

最后，记得在组件中引入SheetJS库。

import * as XLSX from 'xlsx'

这样就完成了在Vue 3中使用Element UI和SheetJS导出Excel文件的操作。通过这种方式，我们可以方便地将数据导出为Excel文件，实现更灵活的数据处理和展示。