I have to display base64 pdf in new tab. I am using below code
var windo = window.open("", ""); var objbuilder = ''; objbuilder += ('<embed width=\'100%\' height=\'100%\' src="data:application/pdf;base64,'); objbuilder += (fileData); objbuilder += ('" type="application/pdf" />'); windo.document.write(objbuilder); It is working in FireFox and not working in Chrome and IE. I even tried with tag, but same output, working in FF but not in Chrome and IE.
I look into below JsFiddles, for which are working in FF but not in Chrome,
My Chrome version is : Version 54.0.2840.99 m
FireFox Version : 49.0.2
Is any one have any idea, please share.
Thanks in Advance
15 Answers
for those who still can't do it, i found this in someone else answer, but i don't remember who...
var objbuilder = ''; objbuilder += ('<object width="100%" height="100%" data="data:application/pdf;base64,'); objbuilder += (myBase64string); objbuilder += ('" type="application/pdf">'); objbuilder += ('<embed src="data:application/pdf;base64,'); objbuilder += (myBase64string); objbuilder += ('" type="application/pdf" />'); objbuilder += ('</object>'); var win = window.open("#","_blank"); var title = "my tab title"; win.document.write('<html><title>'+ title +'</title><body>'); win.document.write(objbuilder); win.document.write('</body></html>'); layer = jQuery(win.document); this way we open the pdf in a new tab.
7It should work with Chrome you can use
<iframe src="data:base64...">
<object data="data:base64...">
I've faced the same issue with IE: it's impossible to display a pdf with a base64 string.
I had to generate temporary files on the server to display them with IE he only display existing file by using a path.
You still can use JS library to display your pdf like PDF.js.
function printPreview(data){ var type = 'application/pdf'; let blob = null; const blobURL = URL.createObjectURL( pdfBlobConversion(data, 'application/pdf')); const theWindow = window.open(blobURL); const theDoc = theWindow.document; const theScript = document.createElement('script'); function injectThis() { window.print(); } theScript.innerHTML = 'window.onload = ${injectThis.toString()};'; theDoc.body.appendChild(theScript); } //converts base64 to blob type for windows function pdfBlobConversion(b64Data, contentType) { contentType = contentType || ''; var sliceSize = 512; b64Data = b64Data.replace(/^[^,]+,/, ''); b64Data = b64Data.replace(/\s/g, ''); var byteCharacters = window.atob(b64Data); var byteArrays = []; for ( var offset = 0; offset < byteCharacters.length; offset = offset + sliceSize ) { var slice = byteCharacters.slice(offset, offset + sliceSize); var byteNumbers = new Array(slice.length); for (var i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } var byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } var blob = new Blob(byteArrays, { type: contentType }); return blob; } pass base64 data to this function and it will show the pdf in new window. This is working in chrome and firefox not in IE. Any help Please. I want it to work in IE also. Its giving error where I give the bloburl to window.
Here '@Model.binaryDocument' is the base64 data
1)By Model
<object> <embed type="text/html" width="1200" height="600" src="data:application/pdf;base64,@Model.binaryDocument" /> </object> 2)By js
$(document).ready(function () { var b64Data = "@Model.binaryDocument"; var contentType = "application/pdf"; const blob = b64toBlob(b64Data, contentType); const blobUrl = URL.createObjectURL(blob); window.location = blobUrl; }) const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => { const byteCharacters = atob(b64Data); const byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { const slice = byteCharacters.slice(offset, offset + sliceSize); const byteNumbers = new Array(slice.length); for (let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } const blob = new Blob(byteArrays, { type: contentType }); return blob; } ✔ First solution is better for prevent auto downloading pdf.
When the above answer's do not work due to Size Limitations, you can try this solution, it worked for me when I was trying to convert 16+ page PDFs from Base64 back into a PDF in Chrome.
The fix is to convert the base64 back into Binary, pack it inside of a Blob, and then set the iframe's "src" to a Blob-URI pointing to that blob.
var base64 = ("yourBase64StringVariable") const blob = base64ToBlob( base64, 'application/pdf' ); const url = URL.createObjectURL( blob ); const pdfWindow = window.open(""); pdfWindow.document.write("<iframe width='100%' height='100%' src='" + url + "'></iframe>"); function base64ToBlob( base64, type = "application/octet-stream" ) { const binStr = atob( base64 ); const len = binStr.length; const arr = new Uint8Array(len); for (let i = 0; i < len; i++) { arr[ i ] = binStr.charCodeAt( i ); } return new Blob( [ arr ], { type: type } ); } Original Source of this answer - Open base64 encoded pdf file using javascript. Issue with file size larger than 2 MB
1
