vue+element ui读取excel文件

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,当然也有其他格式的,自行百度。

相关推荐
清灵xmf1 分钟前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
一棵树长得超出它自己3 分钟前
jmeter if控制器在loop控制器执行结束后执行
前端·jmeter
web_Hsir5 分钟前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
赵孝正1 小时前
自动用 Excel 转 .CSV 为 .xlsx 的原理
excel
阳树阳树2 小时前
signal-新的状态管理模式
前端·javascript
fakaifa2 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
爱摄影的程序猿2 小时前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django
互联网上的猪2 小时前
Excel时间类型函数(包括today、date、eomonth、year、month、day、weekday、weeknum、datedif)
笔记·学习·excel
木木黄木木2 小时前
HTML5手写签名板项目实战教程
前端·html·html5
姑苏洛言2 小时前
基于微信小程序实现幸运大转盘页面
前端