情境

一個有點奇葩的需求實現

使用者會上傳一個Excel檔案，要在瀏覽器記住這個上傳的檔案(類似一個即時分析的功能)
這個東西只會在前端現用而不存到DB
而且下次打開時要能自動還原上次的紀錄

作法

需要把2進位檔先轉為dataURL (base64)，並且存到localStorage中。
在上傳成功時，調用此方法

function getBase64AndSave(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
        localStorage.setItem("myUploadFileStr", reader.result);
    };
    reader.onerror = function(error) {
        console.log('Error: ', error);
    };
}

還原檔案

function urltoFile(url, filename, mimeType) {
    return (fetch(url)
        .then(function(res) {
            return res.arrayBuffer();
        })
        .then(function(buf) {
            return new File([buf], filename, {
                type: mimeType
            });
        })
    );
}
/** 還原上次查詢的資料 */
function recoveryLastTimeData() {
    let uploadFileStr = localStorage.getItem("myUploadFileStr"); // 上次記住的data
    if (uploadFileStr) {
        urltoFile(uploadFileStr, "lastTime.xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
            .then(function(file) {
                 // do something...
            });
    } else {
        // 如果是空的，顯示上傳窗口
    }
}

清空

/** 清空上次查詢的資料 */
function clearLastTimeData() {
    localStorage.removeItem("myUploadFileStr"); // 上次記住的data
// do something...
}

上次修改於 2022-10-15