Opening PDF String in new window with javascript

I am trying to open up this string in a new window as a PDF file. Whenever I use window.open() and write the string to the new tab it thinks that the text should be the contents of an HTML document. I want it to recognize that this is a PDF file. Any help is much appreciated

How are you "writing" this string? Do you mean it's returned by the backend (if so, what platform?). If the PDF data is being generated by the backend, make sure you set the correct Content-Type header.

@Josh - He never mentioned AJAX. It could be a standalone HTML page on a CD dynamically generating customised strings for all we know. I doubt that this is possible though.

It is being created on the backend but it will not be possible/elegant to save on the server. Furthermore, content is already being written to the page before the pdf is being generated. thus setting a header to pdf will not work.

17 Answers 17

Just for information, the below

window.open("data:application/pdf," + encodeURI(pdfString)); 

does not work anymore in Chrome. Yesterday, I came across with the same issue and tried this solution, but did not work (it is 'Not allowed to navigate top frame to data URL'). You cannot open the data URL directly in a new window anymore. But, you can wrap it in iframe and make it open in a new window like below. =)

let pdfWindow = window.open("") pdfWindow.document.write( "" ) 

Works in Chrome but once loaded it consumes CPU and GPU and the tab says it is still loading. Tried with iframe , embed and object .

this work great, the document opened in new tab. But, when I click the download icon on the right corner, nothing happen. How to make it downloadable?

The tab still loading issue is very odd. 4 of our team members used the same button to open the pdf, and for 2 people it shows loading in the favicon, but for 2 of us it doesnt show the loading animation. everyone is using the same version of chrome.

var byteCharacters = atob(response.data); var byteNumbers = new Array(byteCharacters.length); for (var i = 0; i < byteCharacters.length; i++) < byteNumbers[i] = byteCharacters.charCodeAt(i); >var byteArray = new Uint8Array(byteNumbers); var file = new Blob([byteArray], < type: 'application/pdf;base64' >); var fileURL = URL.createObjectURL(file); window.open(fileURL); 

You return a base64 string from the API or another source. You can also download it.

This seems like by far the best solution. Ever other solution seemed to work sporadically at best. I kept trying to encode the string responses from the server, but this seemed to be the only sure fire way. Thanks!

Is there a way to obfuscate the url. I want to be the name of the file. Right now it shows as encoded base 64 value?

Wish I could upvote this a hundred times! I've been struggling to get larger files to open for days. Thank you ever so much!

@himanshu-chawla awseome answer! As a side question - is there a way to define the default file name when clicking download button, so it doesn't look like 6a5e4cd0-2db4-4c8c-80b8-15b77f911700.pdf but myFile.pdf ?

You might want to explore using the data URI. It would look something like.

window.open("data:application/pdf," + escape(pdfString)); 

I wasn't immediately able to get this to work, possible because formating of the binary string provided. I also usually use base64 encoded data when using the data URI. If you are able to pass the content from the backend encoded you can use..

window.open("data:application/pdf;base64, " + base64EncodedPDF); 

Hopefully this is the right direction for what you need. Also note this will not work at all in IE6/7 because they do not support Data URIs.

won't work in IE 8+ either, because the URL size will most likely be > 2048 character limit that IE imposes on URLs

I believe this restriction does not apply to Data URIs, only URLs. IE8 has a 32KB Data URI limit that was removed in IE9.

That's great but window.open(url) takes a URL, not a URI. IE chops off anything after 2048 chars, even if you use a data URI. Try this jsfiddle in IE, you'll see it doesn't work: jsfiddle.net/bpdj7ksv

This doesn't work for me window.open('data:application/pdf;base64,' + btoa(unescape(encodeURIComponent(resp))), "_blank", "toolbar=yes, scrollbars=yes, resizable=yes");

This one worked for me.

window.open("data:application/octet-stream;charset=utf-16le;base64,"+data64); 

This one worked too

 let a = document.createElement("a"); a.href = "data:application/octet-stream;base64,"+data64; a.download = "documentName.pdf" a.click(); 

I put the second part of code in a javascript function and called it onclick function of buttom and get answer very well.

window.open("data:application/pdf," + escape(pdfString)); 

The above one pasting the encoded content in URL. That makes restriction of the content length in URL and hence PDF file loading failed (because of incomplete content).

This limit does not apply to Data URIs, only normal navigational URLs. Reference: msdn.microsoft.com/en-us/library/cc848897(v=vs.85).aspx

does anyone know why you wouldn't be able to interact with this window after opening it? like this var wdw = window.open("data:application/pdf," + escape(pdfString)); wdw.print(); The print function doesn't do anything. And I've even tried using a setTimeout to delay the print, but that doesn't work either. It's like it loses the reference to the window object. If I do the same thing but pass in an actual web url it works.

I realize this is a pretty old question, but I had the same thing come up today and came up with the following solution:

doSomethingToRequestData().then(function(downloadedFile) < // create a download anchor tag var downloadLink = document.createElement('a'); downloadLink.target = '_blank'; downloadLink.download = 'name_to_give_saved_file.pdf'; // convert downloaded data to a Blob var blob = new Blob([downloadedFile.data], < type: 'application/pdf' >); // create an object URL from the Blob var URL = window.URL || window.webkitURL; var downloadUrl = URL.createObjectURL(blob); // set object URL as the anchor's href downloadLink.href = downloadUrl; // append the anchor to document body document.body.appendChild(downloadLink); // fire a click event on the anchor downloadLink.click(); // cleanup: remove element and revoke object URL document.body.removeChild(downloadLink); URL.revokeObjectURL(downloadUrl); >);