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

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui