从excel表格导入数据到vue

最新推荐文章于 2024-04-27 06:36:15 发布

Time202051

最新推荐文章于 2024-04-27 06:36:15 发布

阅读量441

点赞数 1

分类专栏： Export2Excel 文章标签： vue excel

本文链接：https://blog.csdn.net/weixin_45890414/article/details/113700220

版权

Export2Excel 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

备注：el-table-column的prop是excel表头的中文。没在excel中找到对应的英文字段。prop如果想要英文的可以手动map去映射。但是这样表单就无法动态了。后期找到好的方法再更新

 <el-upload
        class="upload"
        action
        :multiple="false"
        :show-file-list="false"
        accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        :http-request="httpRequest"
      >
        <el-button type="primary" size="default">从excel导入</el-button>
  </el-upload>
    
    <el-table :data="tableData" border style="width: 100%">
      <template v-for="(item,index) in tHeader">
        <el-table-column :prop="item" :label="item" :key="index" :render-header="renderHandle"></el-table-column>
      </template>
    </el-table>

data区域数据

  data() {
    return {
      tableData: [],
      tHeader: []
    }
  },

监听器，获取tableData自动计算表头tHeader。你也可以将表头写死，按execl表头一一对应

  watch: {
    tableData: {
      immediate: true,   //初次立即执行
      handler() {
        var arr = this.tableData.reduce((acc, item) => {
          acc.push(...Object.keys(item))
          return acc
        }, [])
        this.tHeader = [...new Set(arr)]
      }
    }
  },

方法methods区域直接复制就好👇 唯一要修改的就是 this.tableData = exl

   httpRequest(e) {
      let file = e.file // 文件信息
      if (!file) {
        // 没有文件
        return false
      } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
        // 格式根据自己需求定义
        this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
      }

      const fileReader = new FileReader()
      fileReader.onload = ev => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary' // 以字符编码的方式解析
          })
          const exlname = workbook.SheetNames[0] // 取第一张表
          const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
          // 这里的prop是中文 可以自动配置表头  可以通过tableData的key自己创建表头循环的数组
          this.tableData = exl
          console.log(this.tableData)
          // document.getElementsByName('file')[0].value = '' // 根据自己需求，可重置上传value为空，允许重复上传同一文件

          // 这里将中文转化为英文的prop但是要手动去创建，还没发现 自动配置的方法
          /* var tableData = []
          for (var i = 0; i < exl.length; i++) {
            var sheetData = {
              // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
              //此处的字段名对应 上面表格数据的字段名
              date: exl[i]['时间'],
              name: exl[i]['姓名'],
              address: exl[i]['地址']
            }
            // 将 JSON 数据挂到 data 里
            tableData.push(sheetData)
          }
          this.tableData = tableData */
        } catch (e) {
          console.log('出错了：：')
          return false
        }
      }
      fileReader.readAsBinaryString(file)
    }