vue+element ui读取excel文件

只吃一口e2023-10-16 19:55

html 复制代码

<el-upload
  ref="upload"
  :http-request="handleImport"
  :show-file-list="false"
  accept=".xlsx,.xls"
  action="#"
  class="upload-demo"
  drag
  multiple
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div slot="tip" class="el-upload__tip">只能上传xlsx、xls文件，且不超过500kb</div>
</el-upload>

javascript 复制代码

handleImport(event) {
  const file = event.file
  if (file) {
    this.readExcel(file)
    this.dialogImport = false
  }
},
readExcel(files) {
  const fileReader = new FileReader()
  fileReader.onload = (files) => {
    try {
      const data = files.target.result
      const workbook = xlsx.read(data, {
        type: 'binary'
      })
      const wsname = workbook.SheetNames[0] // 取第一张表
      const ws = xlsx.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容
      // console.log(ws, 'ws是表格里的数据，且是json格式')
      this.$message.success('导入成功')
      for (let i of ws) {
        const { 姓名, 手机号, 欠薪金额, 身份证号, 欠薪开始时间, 欠薪结束时间, 开户银行, 银行卡号, 备注 } = i

        this.queryParam.list.push({
          name: 姓名,
          cellPhone: 手机号,
          times: [this.fileDate(欠薪开始时间), this.fileDate(欠薪结束时间)],
          bankNo: 银行卡号,
          idcardNumber: 身份证号,
          money: 欠薪金额,
          bank: 开户银行,
          remark: 备注
        })
      }
    } catch (e) {
      console.log(e)
      this.$message.warning('请重试')
      return false
    }
  }
  fileReader.readAsBinaryString(files)
},
fileDate(date) {
  if (date) {
    let year, month, day, HH, mm, ss
    const time = new Date((date - 1) * 24 * 3600000 + 1 - 8 * 3600000)

    time.setFullYear(time.getFullYear() - 70)
    let timeDate
    year = time.getFullYear() // 年
    month = time.getMonth() < 9 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1 // 月
    day = time.getDate() <= 9 ? '0' + time.getDate() : time.getDate() // 日
    HH = time.getHours() // 时
    mm = time.getMinutes() // 分
    ss = time.getSeconds() // 秒
    return (timeDate = year + '-' + month + '-' + day)
  } else return ''
},

:http-request="handleImport" 个人习惯使用这个方法，当然也可以使用别的方法，比如 :on-change="handleImport" 只要是能获取到文件都可以。

fileDate方法是格式化时间的，excel读取的时间格式转成自己想要的格式。我这边格式是YYYY-MM-dd，当然也有其他格式的，自行百度。