How to build PDF file from binary string returned from a web-service using javascript

Question

I am trying to build a PDF file out of a binary stream which I receive as a response from an Ajax request.

Via XmlHttpRequest I receive the following data:

%PDF-1.4.... ..... ....hole data representing the file .... %% EOF 

What I tried so far was to embed my data via data:uri. Now, there's nothing wrong with it and it works fine. Unfortunately, it does not work in IE9 and Firefox. A possible reason may be that FF and IE9 have their problems with this usage of the data-uri.

Now, I'm looking for any solution that works for all browsers. Here's my code:

// responseText encoding  pdfText = $.base64.decode($.trim(pdfText));  // Now pdfText contains %PDF-1.4 ...... data...... %%EOF  var winlogicalname = "detailPDF"; var winparams = 'dependent=yes,locationbar=no,scrollbars=yes,menubar=yes,'+             'resizable,screenX=50,screenY=50,width=850,height=1050';  var htmlText = '<embed width=100% height=100%'                      + ' type="application/pdf"'                      + ' src="data:application/pdf,'                      + escape(pdfText)                      + '"></embed>';                   // Open PDF in new browser window                 var detailWindow = window.open ("", winlogicalname, winparams);                 detailWindow.document.write(htmlText);                 detailWindow.document.close(); 

As I have said, it works fine with Opera and Chrome (Safari hasn't been tested). Using IE or FF will bring up a blank new window.

Is there any solution like building a PDF file on a file system in order to let the user download it? I need the solution that works in all browsers, at least in IE, FF, Opera, Chrome and Safari.

I have no permission to edit the web-service implementation. So it had to be a solution at client-side. Any ideas?

Answer 1

Is there any solution like building a pdf file on file system in order to let the user download it?

Try setting responseType of XMLHttpRequest to blob , substituting download attribute at a element for window.open to allow download of response from XMLHttpRequest as .pdf file

var request = new XMLHttpRequest(); request.open("GET", "/path/to/pdf", true);  request.responseType = "blob"; request.onload = function (e) {     if (this.status === 200) {         // `blob` response         console.log(this.response);         // create `objectURL` of `this.response` : `.pdf` as `Blob`         var file = window.URL.createObjectURL(this.response);         var a = document.createElement("a");         a.href = file;         a.download = this.response.name || "detailPDF";         document.body.appendChild(a);         a.click();         // remove `a` following `Save As` dialog,          // `window` regains `focus`         window.onfocus = function () {                                document.body.removeChild(a)         }     }; }; request.send();