【vue3】：Excel导入导出解决方案

# Excel 导入导出

# 导入

方式一：点击按钮，选中文件，进行上传

方式二：拖拽文件进行上传

两者的实现步骤如下：

• 获取文件信息

• 解析文件（核心）npm i xlsx@0.17.0

• 生成数据结构，发送给后端

---

方式一：点击按钮，选中文件，进行上传

工具函数

// 获取表头（通用方式）
export const getHeaderRow = sheet => {
   
  const headers = []
  const range = XLSX.utils.decode_range(sheet['!ref'])
  let C
  const R = range.s.r
  /* start in the first row */
  for (C = range.s.c; C <= range.e.c; ++C) {
   
    /* walk every column in the range */
    const cell = sheet[XLSX.utils.encode_cell({
    c: C, r: R })]
    /* find the cell in the first row */
    let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
    if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
    headers.push(hdr)
  }
  return headers
}

export const USER_RELATIONS = {
   
  姓名: 'username',
  联系方式: 'mobile',
  角色: 'role',
  开通时间: 'openTime'
}

// 数据处理
const generateData = results => {
   
  const arr = []
  results.forEach(item => {
   
    const userInfo = {
   }

    Object.keys(item).forEach(key => {
   
      if (USER_RELATIONS[key] === 'openTime') {
   
        userInfo[USER_RELATIONS[key]] = formatDate(item[key])
        return
      }
      userInfo[USER_RELATIONS[key]] = item[key]
    })
    arr.push(userInfo)
  })
  return arr
}

 <el-button :loading="loading" type="primary" @click="handleUpload"></el-button>
 <input ref="excelUploadInput" type="file" accept=".xlsx, .xls" @change="handleChange"/>
<script setup>
import XLSX from 'xlsx'    
const excelUploadInput = ref(null)
const handleUpload = () => {
  excelUploadInput.value.click()
}

const handleChange = (e) => {
  const files = e.target.files
  const rawFile = files[0]
  if (!rawFile) return
  upload(rawFile)
}

// 触发上传事件
const upload = rawFile => {
 // 读取文件（异步）
 return new Promise((resolve, reject) => {
    const reader = new FileReader()
    // 该事件在读取操作完成时触发
    reader.onload = e => {
      // 1. 获取解析到的数据
      const data = e.target.result
      // 2. 利用 XLSX 对数据进行解析
      const workbook = XLSX.read(data, { type: 'array' })
      // 3. 获取第一张表格(工作簿)名称
      const firstSheetName = workbook.SheetNames[0]
      // 4. 只读取 Sheet1（第一张表格）的数据
      const worksheet = workbook.Sheets[firstSheetName]
      // 5. 解析数据表头
      const header = getHeaderRow(worksheet)
      // 6. 解析数据体
      const results = XLSX.utils.sheet_to_json(worksheet)
      // 7. 传入解析之后的数据
      generateData({ header, results })
      // 8. 异步完成
      resolve()
    }
    // 启动读取指定的 Blob 或 File 内容
    reader.readAsArrayBuffer(rawFile)
  })   
}
const generateData = ({ header, results }) => {
  const updateData = generateData(results)
  // 将数据发送给后端进行存储
}
</script>

---

方法二：拖拽文件进行上传

拖拽主要是实现一个拖拽的一个过程&#x