JS - SheetJS

製作專案的時候蠻常遇到Excel，檔案，到底要怎麼匯入到資料庫，要怎麼傳送給後端
今天就來介紹 SheetJS，由於現在蠻多都是前後端分離的架構，我這邊就只介紹前端使用套件，是純Javascript處理。

plugin install

upload

// <input type="file" id="fileinput" />
async function getWorkbookFromFile(excelFile) {
    return new Promise((resolve, reject) => {
        var reader = new FileReader();
        reader.onload = (event) => {
            var data = event.target.result;
            /* 將檔案讀取 */
            var workbook = XLSX.read(data, {type : 'binary'});
            var rowObj = XLSX.utils.sheet_to_json(workbook.Sheets['工作表1']); // 這個是excel 下方可以新增很多 的 工作表(workbook)
            // console.log(workbook.SheetNames); 測試： 讀取工作表名稱
            resolve(rowObj);
        };

        /* FileReader 執行動作 將傳入的 File讀取 */
        reader.readAsBinaryString(excelFile);
    });
}

async function save(){
    var files = $('#fileinput').prop('files');
    var data = await getWorkbookFromFile(files[0])
    console.log(data); 
    // [{欄位頭1: '內容1', 欄位頭2: '內容2', __rowNum__: 1}] ，所以就可以傳這個給後端了
    // $.ajax({ ... })
}

download

function exportData(){
    $.ajax({
        type: method,
        url: url,
        headers: { 
            Accept : "text/csv; charset=utf-8",
            "Content-Type": "text/csv; charset=utf-8"
        },
        success: function (result) {
            /* 將回傳的檔案轉成 wooksheet */
            var wooksheet = XLSX.utils.json_to_sheet(result);

            /* 新增到 工作表 workbook */
            var workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, wooksheet, "工作表1"); 

            /* 產生 XLSX file */
            XLSX.writeFile(workbook, `Example.xlsx`);
        }
    })
}