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