前端實現Excel匯入和匯出功能

介紹

最近專案中讓實現一個匯入匯出Excel的功能，查詢了一些外掛後發現js-xlsx這個外掛，所以就嘗試使用了一下，這裡將使用方法和遇到的問題簡單記錄一下。

SheetJS js-xlsx 是一款能夠讀寫多種格式表格的外掛，瀏覽器支援良好，並且能在多個語言平臺上使用，目前在 github 上有 14k 個 star。
外掛地址：https://github.com/SheetJS/js…

使用

1.安裝依賴

進入專案資料夾，安裝 xlsx

yarn add xlsx

2.在專案中引入

import * as XLSX from `xlsx`

匯出Excel功能實現

1.定義匯出時需要使用的方法

export default function download(json,fileName){
    const type = `xlsx`//定義匯出檔案的格式
    var tmpDown;//匯出的內容
    var tmpdata = json[0];
    json.unshift({});
    var keyMap = []; //獲取keys
    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: ""
    }); //建立二進位制物件寫入轉換好的位元組流
    saveAs(tmpDown,fileName);
}

function saveAs(obj, fileName){//匯出功能實現
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "下載";
    tmpa.href = URL.createObjectURL(obj); //繫結a標籤
    tmpa.click(); //模擬點選實現下載
    setTimeout(function () { //延時釋放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL
    }, 100);
}

function s2ab(s){ //字串轉字元流
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}

function getCharCol(n){
    let temCol = ``,
    s = ``,
    m = 0
    while (n > 0) {
        m = n % 26 + 1
        s = String.fromCharCode(m + 64) + s
        n = (n - m) / 26
    }
    return s
}

2.專案中使用匯出方法

//匯出excel
//匯出excel
downloadExl = () => {
    const { results } = this.props //需要匯出的json資料
    let datas = _.clone(results)//這裡為了不影響專案的資料的使用 採用了lodash中的深克隆方法
    let json = datas.map(item=> { //將json資料的鍵名更換成匯出時需要的鍵名
        return {
            `人員ID` :item.id,
            `姓名` : item.name,
            `證件型別`: this.findIdType(item.idType),//將型別代號轉為漢字
            `證件號碼`: item.credentialsId,
            `固定電話`: item.tel,
            `行動電話`: item.mobile
        }
    })
    download(json,`人員資訊.xlsx`)//匯出的檔名
}

3.繫結事件

<Button onClick={this.downloadExl}>匯出Excel</Button>

這樣就能輕鬆實現Excel的匯出功能了

匯入Excel功能實現

1.定義匯入時需要使用的方法

//匯入excel
onImportExcel = file => {
    // 獲取上傳的檔案物件
    const { files } = file.target;
    // 通過FileReader物件讀取檔案
    const fileReader = new FileReader();
    fileReader.onload = event => {
        try {
            const { result } = event.target;
            // 以二進位制流方式讀取得到整份excel表格物件
            const workbook = XLSX.read(result, { type: `binary` });
            // 儲存獲取到的資料
            let data = [];
            // 遍歷每張工作表進行讀取（這裡預設只讀取第一張表）
            for (const sheet in workbook.Sheets) {
            // esline-disable-next-line
            if (workbook.Sheets.hasOwnProperty(sheet)) {
                // 利用 sheet_to_json 方法將 excel 轉成 json 資料
                data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                // break; // 如果只取第一張表，就取消註釋這行
            }
        }
        // 最終獲取到並且格式化後的 json 資料
        const uploadData = data.map(item=> {
            return {
                id : Number(item[`人員ID`]),
                name : item[`姓名`],
                idType: this.findIdType(item[`證件型別`],`string`),
                credentialsId: item[`證件號碼`],
                tel: item[`固定電話`],
                mobile: item[`行動電話`]
            }
        })
        console.log(uploadData)//這裡得到了後端需要的json資料，呼叫介面傳給後端就行了
        message.success(`上傳成功！`) //這裡用了antd中的message元件
        } catch (e) {
            // 這裡可以丟擲檔案型別錯誤不正確的相關提示
            message.error(`檔案型別不正確！`);
        }
    };
    // 以二進位制方式開啟檔案
    fileReader.readAsBinaryString(files[0]);
}

2.繫結事件

<Button className={Styles.upload_wrap}>
    匯入Excel
    <input className={Styles.file_uploader} type=`file` accept=`.xlsx, .xls` onChange={this.onImportExcel} /> 
    //這裡對原有的input樣式進行了修改，accept 屬性定義了上傳檔案支援的型別，onChange 操作中的 importExcel 方法定義了上傳檔案時執行的操作。 
</Button>

3.修改樣式

.upload_wrap {
  display: inline-block;
  position: relative;
  width: 94px;
  padding: 3px 5px;
  overflow: hidden;
}

.file_uploader {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  outline: none;
  opacity: 0;
  background-color: transparent;
}

.upload_text {
  display: inline-block;
  margin-left: 5px;
}

.upload_tip {
  display: inline-block;
  margin-left: 10px;
  color: #999;
}

4.針對檔案上傳和讀取結果分別做了對應的提示（這裡使用 ant design 中的 message 元件）

5.得到的json資料

匯入匯出功能就這樣實現了，是不是很簡單。