6

I am getting a Blob content from webservice callout and requirement is to display the file in browser.

What I have:

  • Blob file (fileBlob)

Above blob parameter I get as response and sending same back to javascript method in "callback". I am trying to convert the blob to respective file format and view on browser (I dont want to download unless enduser wants so).

I tried below:

    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);   
        } 
    };

Update enter image description here

Update 2 (after treating response as base64) enter image description here

sf_user
  • 168
  • 1
  • 2
  • 9
  • you say `fileBlob`, `contentType` and `fileName` are three "parameters" you get ... yet, your code doesn't seem to reference **any** of those. Perhaps you need to post the code you are having an issue with, not some random code that looks like it's trying to DOWNLOAD rather than PREVIEW – Jaromanda X Aug 11 '18 at 03:05
  • @JaromandaX: edited question to reflect that I am receiving only blob from webservice. Thanks – sf_user Aug 11 '18 at 11:32
  • right - so you thought the blob was an important addition to the question too? – Jaromanda X Aug 11 '18 at 12:10
  • I added that because Krishna asked me to add (from below response) – sf_user Aug 11 '18 at 12:27

1 Answers1

7

Make use of iframe to display pdf file, the function would look like this with blob response and file name.

   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>')

            }
        }
KrishnaSingh
  • 696
  • 1
  • 7
  • 12
  • Thanks Krishna. This seems to work but as soon as pdf loads, browser tab refreshes to home page. I tried adding `return false` in your method but that didnt help either, any idea ? – sf_user Aug 11 '18 at 10:30
  • 1
    I have updated the code, enrich your blob data with Uint8Array. If you still have problem share your blob data sample. – KrishnaSingh Aug 11 '18 at 11:32
  • I was getting "Cannot read property of document null" and then changed last line to `window,document.write` instead of `win.document.write`. Now after I get the response, tab opens as pdf but gives error `Failed to load pdf document` updated my question with error screen shot and also the blob I am receiving from service – sf_user Aug 11 '18 at 11:56
  • 1
    Try the new updated code, it should work I suspect your response is raw bytes array. Enrich your data first with var bytes = new Uint8Array(resData); – KrishnaSingh Aug 11 '18 at 12:00
  • Your response seems like its's base64 format so u can try win.document.write('') ; – KrishnaSingh Aug 11 '18 at 12:08
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/177862/discussion-between-krishnasingh-and-sf-user). – KrishnaSingh Aug 11 '18 at 12:15
  • I am positive its blob as my return type in server side method is blob. However I tried to use the above one u mentioned (base64) and I am getting page as shown in screenshot (updated in question) – sf_user Aug 11 '18 at 12:15
  • Thanks Krishna for helping me with this. https://stackoverflow.com/questions/40674532/how-to-display-base64-encoded-pdf – sf_user Aug 11 '18 at 12:45
  • 1
    Will this be possible for blob types `application/vnd.ms-excel` and `application/msword` – Yaje Apr 10 '19 at 06:41