javascript - Konvertovať Blob na súbor a zobraziť náhľad v prehliadači (bez sťahovania)


Z webovej služby získavam obsah typu Blob a požiadavka je zobraziť súbor v prehliadači.

Čo mám:

  • Súbor blob (fileBlob)

Parameter blob vyššie dostávam ako odpoveď a posielam ho späť do javascriptovej metódy v „callbacku“. Pokúšam sa previesť blob na príslušný formát súboru a zobraziť ho v prehliadači (nechcem ho sťahovať, pokiaľ si to používateľ nebude želať).

Skúsil som nasledovné:

    var callback1 = { 
        onSuccess: function(e){ //e is the blob content I am receiving
            alert('Receiving file from SF:---> ' + e);
            var file = new File([e], "uploaded_file.pdf", { type: "application/pdf", lastModified: Date.now() });
            //document.body.append(file);
            //var blob=new Blob([e], {type:"application/pdf"});
            var link=document.createElement('a');
            //link.href=window.URL.createObjectURL(e);
            link.download=file;
            link.click();                

        }, onFailure: function(error){
            alert(error);   
        } 
    };

Aktualizácia

Aktualizácia 2 (po spracovaní odpovede ako base64)

Odpoveď č. 1

Použite iframe na zobrazenie súboru PDF, funkcia by vyzerala takto s odpoveďou typu blob a názvom súboru.

   function openPDF(resData, fileName) {
            var ieEDGE = navigator.userAgent.match(/Edge/g);
            var ie = navigator.userAgent.match(/.NET/g); // IE 11+
            var oldIE = navigator.userAgent.match(/MSIE/g); 
            var bytes = new Uint8Array(resData); //use this if data is raw bytes else directly pass resData
            var blob = new window.Blob([bytes], { type: 'application/pdf' });

            if (ie || oldIE || ieEDGE) {
               window.navigator.msSaveBlob(blob, fileName);
            }
            else {
               var fileURL = URL.createObjectURL(blob);
               var win = window.open();
               win.document.write('<iframe src="' + fileURL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')

            }
        }