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

安装依赖
npm install xlsx
引入
import XLSX 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;
    console.log(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 = XLSX.read(data, {
        type: 'binary'
        });
        const wsname = workbook.SheetNames[0];//取第一张表
        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);//生成json表格内容
        console.log(ws);
        that.outputs = [];//清空接收数据
        //编辑数据
        for(var i= 0;i<ws.length;i++){
        var sheetData = {
            address: ws[i].addr,
            value: ws[i].value
        }
        that.outputs.push(sheetData);
        }
        this.$refs.upload.value = '';
 
    } catch (e) {
 
        return false;
    }
    };
    fileReader.readAsBinaryString(files[0]);
}
第二种结合element UI 的upload控件实现读取文件并生成数组

upload绑定函数

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

    readExcel1(files) {//表格导入
            var that = this;
            console.log(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 = XLSX.read(data, {
                        type: 'binary'
                    });
                    const wsname = workbook.SheetNames[0];//取第一张表
                    const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);//生成json表格内容
                    console.log(ws);
                    // that.peopleArr = [];//清空接收数据
                    // if(that.peopleArr.length == 1 && that.peopleArr[0].roleName == "" && that.peopleArr[0].enLine == ""){
                    //     that.peopleArr = [];
                    // }
                    //重写数据
                    try{
                        
                    }catch(err){
                        console.log(err)
                    }
                    
                    this.$refs.upload.value = '';
        
                } catch (e) {
        
                    return false;
                }
            };
            fileReader.readAsBinaryString(files[0]);
        },
————————————————
版权声明：本文为CSDN博主「墨色梧桐」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liyi_mowu/article/details/84768140

 

相关git：https://github.com/736755244/Import