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

相关推荐
北海-cherish5 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909066 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist7 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师7 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang7 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。7 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
左手吻左脸。7 小时前
Element UI表格中根据数值动态设置字体颜色
vue.js·ui·elementui
李白的故乡7 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_7 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含7 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js