vue项目中导入excel表格 vue技术交流群（864583465)

vue项目中导入excel表格 vue技术交流群（864583465)
1、安装xlsx插件

cnpm install xlsx --save

2、页面代码

<template>
  <div class="hello">
    <input type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload"  @change="fileUploaded">
    <br> <br>
    <el-button @click="uploadExcel()">上传Excel</el-button>
  </div>
</template>

<script>
  import XLSX from 'xlsx'
export default {
  data () {
    return {
      file: null
    }
  },
  methods:{
    uploadExcel(){
      const fileReader = new FileReader();
      fileReader.readAsBinaryString(this.file);
      fileReader.onload = ev => {
        const data = ev.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) // 读取到的excel表格数据

        //执行自己的业务逻辑

      }
    },
    fileUploaded(event){
      console.log(event.currentTarget.files)
      let fileName = event.currentTarget.files[0].name
      let fileType = fileName.slice(fileName.indexOf('.xls'))
      if(fileType!='.xlsx'&&fileType!='.xls'){
        this.$message.error('请上传excel文件');
      } else {
        this.file = event.currentTarget.files[0];
      }
    },
  },

}
</script>

<style lang="scss">
  .hello{
    box-sizing: border-box;
    padding: 50px;
  }
</style>

3、显示页面

4、说明
（1）若要读取多个Sheet的excel表格，需要先遍历workbook对象中的SheetNames，SheetNames是一个包含Sheet名称的数组，再循环读取相应的内容即可，主要代码如下：

   for (let sheetName of workbook.SheetNames) {
          let ws = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);//生成json表格内容
          console.log(ws) // Sheet名成为sheetName对应的excel数据
        } 
        

（2）步骤3中显示的上传按钮样式可自定义

PS：欢迎加入vue技术交流群（864583465）进行更多问题的探讨，你的问题将是我们大家共同进步的关键