【總結】純前端使用SheetJS實現excel的上傳下載

項目簡介

一個基於SheetJS完成excel數據上傳和生成新excel的網頁。不需要後端提供下載excel的相關API。

本項目是爲我校體育部製作，用於完成對學生體側數據的評估，包括各項數據對應評估和總評估，最後生成總成績表以及及格率。

SheetJS網址：https://sheetjs.com/

代碼地址：https://github.com/RemEb/xlsxUploadorDownload

項目功能描述

● 學生基礎數據通過excel上傳至網頁（年級編號 班級名稱 學籍號 姓名 性別）；
● 通過網頁端錄入學生各項體側數據（身高 體重 肺活量 50米跑 立定跳遠 等）；
● 生成學生各項數據評估以及總評估；
● 通過生成excel完成數據展示；

 

純前端完成excel的導入和導出，可在網頁中表格內容進行修改，並在JS中對數據進行相關處理後導出新的excel，下面技術要點：

根據excel表頭在網頁表格的表頭中尋找相對應的，將數據寫入的相關js代碼

/**
 * 導入excel數據，並創建表格
 * @param obj
 */
function importf(obj) {
    let jsono;
    if (!obj.files) {
        return;
    }
    var f = obj.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var data = e.target.result;
        if (rABS) {
            wb = XLSX.read(btoa(fixdata(data)), {//手動轉化
                type: 'base64'
            });
        } else {
            wb = XLSX.read(data, {
                type: 'binary'
            });
        }
        //wb.SheetNames[0]是獲取Sheets中第一個Sheet的名字
        //wb.Sheets[Sheet名]獲取第一個Sheet的數據
        jsono = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        //document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
        data1 = jsono;
        //console.log(JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])));
        fillTable();
    };
    if (rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
}

 

根據網頁表格中輸入的內容，生成一份新的excel

/**
 * 文件流轉BinaryString
 * @param data
 * @returns {string}
 */
function fixdata(data) {
    var o = "",
        l = 0,
        w = 10240;
    for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
    return o;
}

/**
 * 導出excel
 * @param json
 * @param type
 */
function downloadExl(json, type) {
    var tmpdata = json[0];
    json.unshift({});
    var keyMap = []; //獲取keys
    //keyMap =Object.keys(json[0]);
    for (var k in tmpdata) {
        keyMap.push(k);
        json[0][k] = k;
    }
    var tmpdata = [];//用來保存轉換好的json
    json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
        v: v[k],
        position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
    }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
        v: v.v
    });
    var outputPos = Object.keys(tmpdata); //設置區域,比如表格從A1到D10
    var tmpWB = {
        SheetNames: ['mySheet'], //保存的表標題
        Sheets: {
            'mySheet': Object.assign({},
                tmpdata, //內容
                {
                    '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //設置填充區域
                })
        }
    };
    tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
        {bookType: (type == undefined ? 'xlsx' : type), bookSST: false, type: 'binary'}//這裏的數據是用來定義導出的格式類型
    ))], {
        type: ""
    }); //創建二進制對象寫入轉換好的字節流
    var href = URL.createObjectURL(tmpDown); //創建對象超鏈接
    document.getElementById("hf").href = href; //綁定a標籤
    document.getElementById("hf").click(); //模擬點擊實現下載
    setTimeout(function () { //延時釋放
        URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()來釋放這個object URL
    }, 100);
}