Vue项目中导入excel文件读取成js数组

1.首先你得有个vue项目，用vue脚手架创建一个：vue init webpack demo

2.安装主角xlsx，有它就够了 ：npm install xlsx --save

3.开搞，先在components中创建一个.vue文件，代码如下：

<template>
  <span>
    <input class="input-file" type="file" @change="exportData"  
    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
    <button @click="btnClick">{{title}}</button>
  </span>
</template>

<script>
import XLSX from 'xlsx'

export default {
	name: "inputExcel",
	props: {
		title: {
			type: String,
			default: "选择excel文件"
		}
	}
	methods: {
		btnClick() {
      		document.querySelector(".input-file").click();
    	},
    	exportData(event) {
    	}
	}
}
</script>

<style scoped>
.input-file {
  display: none;
}
</style>

代码很简单，先引入xlsx，这里用button来触发input的change事件主要是为了好看，input的accept属性可以用来限制文件类型，防止报错，具体怎么写百度上都有。基本框架就完了，然后就是exportData这个方法了，上代码：

	exportData(event) {
      if(!event.currentTarget.files.length) { 
        return;
      }
      const that = this;
      // 拿取文件对象
      var f = event.currentTarget.files[0];
      // 用FileReader来读取
      var reader = new FileReader();
      // 重写FileReader上的readAsBinaryString方法
      FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var wb; // 读取完成的数据
        var outdata; // 你需要的数据
        var reader = new FileReader();
        reader.onload = function(e) {
  		// 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
         // 接下来就是xlsx了，具体可看api
          wb = XLSX.read(binary, {
            type: "binary"
          });
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          // 自定义方法向父组件传递数据
          that.$emit("getResult", outdata);
        };
        reader.readAsArrayBuffer(f);
      };
      reader.readAsBinaryString(f);
    },

4.接下来就是组件调用了：

<template>
	<!-- 调用 -->
    <input-excel @getResult="getMyExcelData"></input-excel>
</template>

<script>
// 引入组件, 地址根据自己的文档位置写
import inputExcel from './inputExcel'
export default {
// 注册 
  components: {
    inputExcel
  },
  methods: {
  	// getResult事件方法
    getMyExcelData(data) {
    	//处理你的数据
      	console.log(data)
    }
  }
}
</script>