vue 实现Excel 导入 导出 功能

---------------------导入:
button

<el-upload action="/" :http-request="importExcelInChild" list-type="text" :show-file-list="false">
          <el-button size="small" type="primary">导入</el-button>
        </el-upload>

js:


import XLSX from 'xlsx'


importExcelInChild (content) {
      const file = content.file
      // let file = file.files[0] // 使用传统的input方法需要加上这一步
      const types = file.name.split('.')[1]
      const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
      if (!fileType) {
        this.$message('格式错误!请重新选择')
        return
      }
      var reader = new FileReader()
      reader.readAsBinaryString(content.file)
      reader.onload = (e) => {
        let data = e.target.result
        this.wb = XLSX.read(data, {
          type: 'binary'
        })
        const that = this
        // const heade 里面的字段顺序 是按照excel中的顺序进行排序的
        const header = ['ucode', 'uname', 'ulabel', 'urank', 'ratio', 'mcode', 'name', 'batch', 'require', 'mfdual',
          'mfstate', 'mfspecial', 'mfassess', 'sp', 'bp', 'cost', 'rank', 'loww', 'enroll', 'enrolldelta', 'city', 'remark']
 
        that.importData = XLSX.utils.sheet_to_json(that.wb.Sheets[that.wb.SheetNames[0]], {
          header: header,
          skipHeader: true // 将excel 表头忽略
        })
        that.importData.splice(0, 1)
        that.tempCart = that.importData
        this.addUserByExcel()
      }
    },
    addUserByExcel () {
     this.importData.forEach(s => {
      s.level = levels.find(n => s.level === n.levelStr).id
       s.province = Constants.provinceArr.find(n => s.province ===           n.label).id
          s.disbled = 0
       })
       // 将 导入的数据进行后台保存
       Api.ADMIN.addAccounts(this.importData).then((a, b) => {
       this.$message.success('导入成功')
      })
       this.refreshUsers()
    },

------------------------导出

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值