vue3导入excel表格并展示(使用xlsx插件+vite+element-plus)/js上传表格(js+xlsx)

第一步：下载两个库

npm install file-saver --save

npm install xlsx --save

第二步：引入

import { saveAs } from 'file-saver'

import * as XLSX from 'xlsx' 

第三步：给组件设置点击事件

<el-form-item @click="handleExport"
      >
      导出
</el-form-item>

第四步：封装点击事件函数

const handleExport = () => {
   // 将数据转换为工作表格式
   const ws = XLSX.utils.aoa_to_sheet(data)
   // 创建一个新的工作簿并添加工作表
   const wb = XLSX.utils.book_new()
   XLSX.utils.book_append_sheet(wb, ws, "Sheet1")
  // 导出工作簿为二进制字符串
  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
  // 使用FileSaver保存文件
  saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'data.xlsx')
}