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

相关推荐
图片转成excel表格35 分钟前
wps怎么算出一行1和0两种数值中连续数值1的个数,出现0后不再计算?
excel·wps
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js