如何读取 .bin 文件并在表格单元格中显示其确切内容？

Question

我想通过文件选择器读取 .bin 文件，我使用下面的代码，效果很好。

var inp2 = document.createElement("input");
inp2.type = "file";
inp2.accept = ".bin";
inp2.setAttribute("id", "myFile");
                    
function readSingleFile(e) {
     var file = e.target.files[0];
     if (!file) {
         return;
     }
     var reader = new FileReader();
     reader.onload = function(event) {
        var fileResult = reader.result;
        binaryContent = fileResult.slice(fileResult.indexOf(",")+1);  // It is in base64 format
     };                 
     reader.readAsDataURL(file);
}

inp2.addEventListener('change', readSingleFile, false);

这工作正常，我能够以 Base64 格式将此二进制内容存储在 Oracle Nosql 数据库中。

但是，我陷入了如何取回文件的原始内容并将其显示给表格的一列（单元格）中的用户的困境。

我附上示例文件内容以供参考。

<95>Eù^F½^N^K:Ã<8c>k5(^G,<89>^U0 Ã<9d>I¶.hâòªÃ<96>@w=<<8c>n$9S^Vòöön<8e>²Ã<8f>íBae&ã#s\âv6<8a>]¼\<88>±<80>y<9f>3¬<9c>^Dø¡=^S<90>aÃ<97><97>Ã<83>Ã<86>®DÃ<92>^OÃ<9b><9a>^\CÃ<99>ºf<90>ùBæöÃ<89>*<82>á£^X<8c>Ã<9c> +e<92>Ã<8e>Ã¥<84><90>\®      F
^O<¡^@Ã<86>Ã<8a>Ã<8e>J^Tò9<84>T<85>¤Ã<99><9d>^VJDÃ<91>1 ^F<87> <8f>îoÃ<81>Ã<94>4-Q=ç^Hf¨¤ä2<96>­6¤ï<8b>äKzMkëYPÃ<9d><94>áaOµü+42«ë^X^PHÃ<8d>¹±<84><8d>óO<95>ã5L¼/<96>³½±Nª<93>P<8b>Ã<99><86><81><98>©ý^Ar^\Záµ^Z<9a>V)Ã<93>/^[²<92>Ã<8d>YC¾^MwT^L^Sõ<97>Ã<9c>ïÃ<8c>ï'¾^LRf>2C/Ã<97>Ã<84>®<9a>Ã¥^DýdVz#tb.\<8f>^E"<97><96>U^X:CI<8a>=<2Uu<86>Ã<8b>Ã<8a>^EîÃ<9d>^B^P^^G^Q^Uö{  6^_Ã<9c>ZJl^Y^CÂ¥^^6'Ã<9f>^Z<80>ïÃ<84>Ã<82>Ã<84>æ0L<8c>Ã<9b>¾Ã<96> eÃ<89>>^N[<95>¸çÃ<80>(<9f>Ã<94><8c>®B^^iÃ<93>9u,Ã<8d>^<9b>aò¸'Ã<99>^O­^S7^_s<îê¸e<9e>^\Ã<97>^Tal0 Ã<85><9b><85>^X<8a>^Gý<83>%Ã<88>læNÃ<96>^Qh­Ã<97>^ZWï:M\·¾<87>ñ<8c>Ã<8a>^XnÃ<9d>^ByBkY·^QÃ<94>^T¤^R:øs¨a^As<92><98>n^ZÃ<86>qÃ<90>7Ã<94>ªÃ<84><82>¤P^Uè)Ã<9d> 1¾Z¯Xíû¦:deï^@Ã<82>â%+Ã<83>¨Jfw°        ø)ähzyáù<9d>n³h^^·0zá<90>k<8a>~<9e>qÃ<96>^NíÃ<91>Ã<8b><88>ué^A]Ã<90>Ã<8f><8d>ý¼Ã<9f>Ã<9a>ì^Ã<98><88>®ë4t¸<81>@Ã¥ei      Ã<87>øÃ<91>lªq³<8b>³Ã<97>^Y^DÃ<85><99>mÃ<99>Ã<81>FÃ<9c>N<98>ð¤Ã<91>Ã<8a><96>\¬Ã<9d>^_|Ã<9c>»CGÃ<8f>^L'¹<83>^Oe^X¨ä÷<8b>ªRÃ<9d><8f><83>9^D¡i®+.:NìRÃ<82>CÃ<88><87>ì(¦U^S¯<86>Ã<83>>äB^V;Ã<96><8b>H<91>,AX:ugB^FV<9d>{lÃ<89>Hò<92>Ã<9c><8c><83>,î=t2"^OUf^G^WRc÷<93><96>²jF)<8a>6^g'$Y^[<86><8a>BN    Ã<82>^PzNë¸<9f>a4Ã<8b>^F°^VÃ<87>;ì­Ã<89>·o^F^GG|PÃ<9a>^BKH§sÃ<8b>yý Ã<9a>F^X$ò^Cº°<91>íÃ<83>^Q0Ã<9c>apÃ<9d><96>mY¯~ö

Answer 1

尝试检查文件是否为img或text，以便您知道是否可以将其显示给用户，否则您可以尝试触发文件的下载 非常模糊的例子：

var base64Content = /* your base64 string from the database */;

// Attempt to determine if the base64 string is likely to be an image or text
// This is a very basic and not completely reliable method
var likelyImage = base64Content.match(/^data:image\/[a-zA-Z]+;base64,/);

var blob;
if (likelyImage) {
    var contentType = likelyImage[0].replace(/^data:(.*);base64,/, '$1');
    blob = base64ToBlob(base64Content.replace(/^data:image\/[a-zA-Z]+;base64,/, ''), contentType);
} else {
    // Attempt to treat as text
    var textContent = atob(base64Content);
    // Check if the text seems to be human-readable - very rudimentary check
    var isTextReadable = /^[\x20-\x7E\s]+$/.test(textContent);
    if (isTextReadable) {
        blob = new Blob([textContent], { type: 'text/plain' });
        displayText(blob);
    } else {
        // Fallback to binary type, triggering download
        blob = base64ToBlob(base64Content, 'application/octet-stream');
        triggerDownload(blob);
    }
}

function base64ToBlob(base64, contentType) {
    var binaryString = atob(base64);
    var length = binaryString.length;
    var bytes = new Uint8Array(length);
    for (var i = 0; i < length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return new Blob([bytes], { type: contentType });
}

function displayText(blob) {
    var reader = new FileReader();
    reader.onload = function(e) {
        var textElement = document.createElement('p');
        textElement.textContent = e.target.result;
        document.body.appendChild(textElement); // Adjust as needed
    };
    reader.readAsText(blob);
}

function triggerDownload(blob) {
    var blobUrl = URL.createObjectURL(blob);
    var downloadLink = document.createElement('a');
    downloadLink.href = blobUrl;
    downloadLink.download = "unknownFile"; // You might want to name it based on context
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}