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 about 2 months
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 about 4 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 about 4 yearsI have updated the code, enrich your blob data with Uint8Array. If you still have problem share your blob data sample.
-
sf_user about 4 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 about 4 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 about 4 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 about 4 yearsLet us continue this discussion in chat.
-
sf_user about 4 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 about 4 yearsThanks Krishna for helping me with this. stackoverflow.com/questions/40674532/…
-
Yaje over 3 yearsWill this be possible for blob types
application/vnd.ms-excel
andapplication/msword