Vue3 导出导入Excel

234 阅读1分钟

安装

pnpm add -S XLSX

方法封装

import * as XLSX from 'xlsx'

// 导出excel
export const ExportXlsx = (configuration) => {
  const { data, head, name, label, widthArr } = configuration

  const list = data.map((item) => {
    const obj = {}
    for (const k in item) {
      if (head[k]) {
        obj[head[k]] = item[k]
      }
    }
    return obj
  })

  // 创建工作表
  const xLSXData = XLSX.utils.json_to_sheet(list)
  // 创建工作簿
  const wb = XLSX.utils.book_new()
  // 将工作表放入工作簿中
  XLSX.utils.book_append_sheet(wb, xLSXData, label)
  xLSXData['!cols'] = []
  // 设置列宽
  widthArr.forEach((item) => {
    xLSXData['!cols'].push({ wpx: item })
  })

  // 生成文件并下载
  XLSX.writeFile(wb, `${name}.xlsx`)
}

// 导入excel
export const ImportXlsx = (e) => {
  const file = e.target.files[0]
  const reader = new FileReader()
  reader.readAsArrayBuffer(file)
  reader.onload = (e) => {
    const data = e.target.result
    const workbook = XLSX.read(data, { type: 'binary', cellDates: true })
    const wsname = workbook.SheetNames[0]
    const outdata = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
    console.log(outdata)
  }
}

参数说明

变量类型释意
data数组导出的数据
head对象导出的数据对应的表头
name字符串导出的文件名
label字符串导出的表单名
widthArr数组导出的表单列宽