Javascript解析excel文件

  最近作後臺項目遇到須要解析用戶上傳的excel文件,並導出文件中的數據的需求;在作這個需求的過程當中,才感受到我大Javascript是無所不能的啊,可以經過二進制方式讀取到excel文件中的內容,而後進一步讀取並操控excel文件中的數據,並將數據以本身須要的格式導出來。git

  解析讀取excel文件,有一個很是好用的插件,在這裏強烈推薦給你們:github

  Spreadsheet Parser and Writerjson

  這個插件可以幫助你讀取到excel文件中的數據並將數據以json的格式導出來,很是好用,很是方便。app

  如下是我在使用這個插件的過程當中所作的demo:this

  

var Excel = function () {
        this.data = []   // EXCEL數據
        this.checkResult = false   // EXCEL規範檢測結果
}

Excel.prototype.check = function (fileSelector,checkStr,url,suc) {
        var self = this;

        document.querySelector(fileSelector).addEventListener('change',function (e) {
            var files = e.target.files;
            var fileReader = new FileReader();


            // 以二進制方式打開文件
            fileReader.readAsBinaryString(files[0]);

            fileReader.onload = function(ev) {
                try {
                    var result = ev.target.result,
                        workbook = XLSX.read(result, {type: "binary"});    // 以二進制流方式讀取獲得整份excel表格對象
                } catch (e) {
                    console.error("文件類型不正確");
                    return;
                }


                var fromTo = '';                   //要讀取EXCEL的表格範圍   A1:C4
                var excelHeadStr = '';             //讀取的EXCEL表頭
                var headCol = '';                  //表頭列號
                var arr = ['A1','B1','C1','D1','E1','F1','G1','H1','I1','J1','K1','L1','M1','N1','O1','P1','Q1','R1','S1','T1','U1','V1','W1','X1','Y1','Z1']
                var index ;

                // 遍歷workbook下的Sheets對象來讀取每個上傳文件的內容
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        fromTo = workbook.Sheets[sheet]["!ref"];    // 獲取EXCEl文件中存在數據的行號和列號

                        for(var j = 0 ; j < 3 ; j++ ){
                            excelHeadStr += workbook.Sheets[sheet][arr[j]].h + ','
                        }

                        // 去除字符串末尾','
                        excelHeadStr = excelHeadStr.substring(0, excelHeadStr.length - 1)

                        if( excelHeadStr === checkStr ){
                            self.checkResult = true
                            fileUpload(fileSelector,url,suc)
                        }else{
                            console.error('EXCEL不符合模版規範')
                            self.checkResult = false
                        }

                        self.data = self.data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    }
                }
            };
        })
    }

function fileUpload(fileSelector,url,suc) {
    var file = document.querySelector(fileSelector).files[0],
        formData = new FormData(),
        reader = new FileReader();

    // 判斷上傳文件類型
    if (!/^.*?\.(xls|xlsx)$/i.test(file.name)){
        console.error('所上傳文件類型不符')
        return false
    }

    formData.append('file',file)
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            var data = JSON.parse(xhr.responseText);
            var src = data.url;
            suc(src);
        }
    }
    xhr.onload = function (e) {
        if (xhr.status === 200) {
            console.log('uploaded');
        } else {
            console.log('file upload failed');
        }
    };
    xhr.send(formData);
}

  

  調用Excel構造方法進行解析:url

var a = new Excel()
    
 a.check('#excel-file','分類,產品名稱,貨號','http://11.com/resource/_upload',function (src) {
        console.log(src)     console.log(a.data)     console.log(a.checkResult)})
相關文章
相關標籤/搜索