使用： vue+element-ui+xlsx.js 上传并预览excel文件_vue+elementui+excel上传预览

转载于https://blog.csdn.net/Handsome3618/article/details/86546647?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-1-86546647.nonecase，并在此基础上做了一点点的修改，再次感恩大佬的创作！！！

<template>

  <div>

    <input type="file"

           @change="importf($event)" />

    <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"

              style="width: 100%">

      <el-table-column v-for="(item,index) in tableLabel"

                       :key="index"

                       :prop="item.prop"

                       :label="item.label"

                       width="180"></el-table-column>

    </el-table>

    <el-pagination @size-change="handleSizeChange"

                   @current-change="handleCurrentChange"

                   :current-page="currentPage"

                   :page-sizes="[1, 20, 30, 40]"

                   :page-size="pagesize"

                   layout="total, sizes, prev, pager, next, jumper"

                   :total="tableData.length">

    </el-pagination>

  </div>

</template>

<script>

import pagination from '@/components/elPagination/elPagination'

import * as XLSX from 'xlsx'

export default {

  data() {

    return {

      tableLabel: [],

      tableData: [],

      currentPage: 1,

      pagesize: 1

    }

  },

 

  mounted() {},

  methods: {

    // 初始页currentPage、初始每页数据数pagesize和数据data

    handleSizeChange(size) {

      this.pagesize = size

      console.log(this.pagesize) //每页下拉显示数据

    },

    handleCurrentChange(currentPage) {

      this.currentPage = currentPage

      console.log(this.currentPage) //点击第几页

    },

    importf(obj) {

      //导入

      if (!obj.target.files) {

        return

      }

      var f = obj.target.files[0]

      console.log(f)

      var reader = new FileReader()

      var jsonobject_0

      var result = []

      reader.onload = e => {

        var data = e.target.result

        //获取xlsx对象

        var workbook = XLSX.read(data, {

          type: 'binary'

        })

 

        jsonobject_0 = XLSX.utils.sheet_to_json(

          workbook.Sheets[workbook.SheetNames[0]]

        )

        var keys = []

        for (var key of Object.keys(jsonobject_0[0])) {

          keys.push(key)

        }

        // console.log(keys)

        var keysLen = keys.length

        for (var i = 0; i < keysLen; i++) {

          this.tableLabel.push({ label: keys[i], prop: 'key' + Number(i + 1) })

        }

 

        for (i = 0; i < jsonobject_0.length; i++) {

          var n = 0

          var item = {}

          for (var key of Object.keys(jsonobject_0[i])) {

            n++

            var mylabel = 'key' + n

            item[mylabel] = jsonobject_0[i][key]

          }

          this.tableData.push(item)

        }

        // console.log(this.tableData)

      }

      reader.readAsBinaryString(f)

    }

  }

}

</script>