vue 实现Excel 导入导出功能

最新推荐文章于 2025-01-21 09:36:24 发布

知了枝头看雪

最新推荐文章于 2025-01-21 09:36:24 发布

阅读量419

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44941581/article/details/114407505

版权

---------------------导入：
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()
    },