Convert Blob to File and preview on browser (not download)
10,753
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>')
}
}
Related videos on Youtube
Author by
sf_user
Updated on September 15, 2022Comments
-
sf_user over 1 year
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); } };
-
sf_user over 5 yearsThanks 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 ? -
KrishnaSingh over 5 yearsI have updated the code, enrich your blob data with Uint8Array. If you still have problem share your blob data sample.
-
sf_user over 5 yearsI was getting "Cannot read property of document null" and then changed last line to
window,document.write
instead ofwin.document.write
. Now after I get the response, tab opens as pdf but gives errorFailed to load pdf document
updated my question with error screen shot and also the blob I am receiving from service -
KrishnaSingh over 5 yearsTry 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 over 5 yearsYour response seems like its's base64 format so u can try win.document.write('<iframe src="data:base64' + resData + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>') ;
-
KrishnaSingh over 5 yearsLet us continue this discussion in chat.
-
sf_user over 5 yearsI 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 over 5 yearsThanks Krishna for helping me with this. stackoverflow.com/questions/40674532/…
-
Yaje about 5 yearsWill this be possible for blob types
application/vnd.ms-excel
andapplication/msword