vue读取本机的excel文件的两种方式

安装依赖

npm install xlsx --save

引入

import XLSX from ‘xlsx’

更新：2022-04-26
最新的xlsx依赖包引入方式改变，以前的直接引入失败了，切换成以下依赖方式：

import { read, utils } from 'xlsx'

第一种input通常方式

template中加入input

<input type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload">

data中声明变量

   data() {
   	    return {
   	        outputs: []
   	    }
   	},

mounted中绑定事件

 mounted() {
   this.$refs.upload.addEventListener('change', e => {//绑定监听表格导入事件
 	 this.readExcel(e);
   })
 },

调用主函数

   readExcel(e) {
       var that = this;
       const files = e.target.files;
       // 如果没有文件名
       if(files.length<=0){
	   		return false;
       }else if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){
	        this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');
	        return false;
       }

       const fileReader = new FileReader();
       fileReader.onload = (ev) => {
	       try {
	           const data = ev.target.result;
	           // 切换为新的调用方式
	           const workbook = read(data, {
	           	type: 'binary'
	           });
	           // 取第一张表
	           const wsname = workbook.SheetNames[0];
	           // 切换为新的调用方式 生成json表格内容
	           const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
	           console.log(ws);
	           // 后续为自己对ws数据的处理
	       } catch (e) {
	           return false;
	       }
       };
       fileReader.readAsBinaryString(files[0]);
   }

第二种结合element UI 的upload控件实现读取文件并生成数组

PS:以前使用的是element的on-change监听，但是会触发两次读取，因此改成before-upload，只会触发一次读取

<el-upload
 ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :before-upload="upload"
  :show-file-list="false"
  accept=".xlsx,.xls"
  style="width: 100px; display: inline-flex;"
>
  <el-button
    size="mini"
    type="text"
  >
    导入
  </el-button>
</el-upload>

upload绑定函数

upload(file,fileList){
    console.log("file",file);
    console.log("fileList",fileList);
    let files = {0: file}
    this.readExcel1(files);
}

readExcel1主函数

// 表格导入
readExcel1(files) {
    var that = this;
    console.log(files);
    // 此处判断不严谨，思路只是根据传入的参数校验数据的完整性，可根据自己需求修改
    // 如果没有文件名
    if(files.length <= 0){
        return;
    }
    if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){
        this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');
        return;
    }

    const fileReader = new FileReader();
    fileReader.onload = (ev) => {
        try {
            const data = ev.target.result;
            const workbook = read(data, {
                type: 'binary'
            });
            // 取第一张表
            const wsname = workbook.SheetNames[0];
            // 生成json表格内容
            const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
            console.log(ws);
            // 后续为自己对ws数据的处理
        } catch (e) {
            return false;
        }
    };
    fileReader.readAsBinaryString(files[0]);
},