CODEWITHSUNDEEP
javascriptangularjsrestcordovaionic-framework
Ivan Vasiljev
Ivan Vasiljev

Reputation: 31

Saving POST response as a file (.pdf) in Cordova, Ionic

I'm trying to save response to a POST request as .pdf file, but it keeps opening as a blank document (with correct number of pages). The code is:

var data = "credentials_login=xxxx&credentials_time=xxxxxxxxxxxxx&credentials_random=xxxxx&credentials_signature=xxxxxxxxxxxxxxxxxxxxx&PdfType=xxxxx";

var xhr = new XMLHttpRequest();


xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {

  $cordovaFile.writeFile(cordova.file.externalDataDirectory, "dc.pdf", this.responseText, true)
     .then(function(success) {
       console.log("success");
     }, function(error) {
       console.log(error.code);
     });
  }
});

xhr.open("POST", "http://xxxxxxx.ru/api/PdfDownload");
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("accept", "application/pdf");

xhr.send(data);

Interestingly, the same code, sent using Postman, saves a correct PDF.

I've been searching for a solution for a couple of days now, but nothing works. Seems like it's something to do with that response is a string and pdf is not, but I'm not sure what exactly. I tried to convert response using some code, found here on stackoverflow, but PDF is blank anyway:

 function stringToArrayBuffer(str) {
     var buf = new ArrayBuffer(str.length);
     var bufView = new Uint8Array(buf);

     for (var i = 0, strLen = str.length; i < strLen; i++) {
         bufView[i] = str.charCodeAt(i);
     }

     return buf;
 }

Also I have "ground truth" PDF (eg what my PDF should be like) and it looks very similar to my corrupted one, with almost the same size (960KB/916KB) and some slight changes here and there in between "stream" tags.

Beginning of the correct PDF:

%PDF-1.5
%����
1 0 obj
<</Type/XObject/Subtype/Form/Resources<</Font<</Helv 2 0 R>>>>/BBox[0 0 12.2 12.94]/FormType 1/Matrix [1 0 0 1 0 0]/Length 93/Filter/FlateDecode>>stream
x��;
�0�2�6���m$`cx� T�B<�OYX��L���0
d�Ӹ����0s�D��X��9i�帱Yf(��e׹EՉ�����
endstream
endobj

and my corrupted one:

%PDF-1.5
%����
1 0 obj
<</Type/XObject/Subtype/Form/Resources<</Font<</Helv 2 0 R>>>>/BBox[0 0 12.2 12.94]/FormType 1/Matrix [1 0 0 1 0 0]/Length 93/Filter/FlateDecode>>stream
x��;
�0�2�6���m$`cx� T�B<�OYX��L���0
d������0s�D��X��9i�1Yf(��e�EI�����
endstream
endobj

UPDATE

FileTransfer code:

 var fileTransfer = new FileTransfer();
 var uri = encodeURI("http://xxxxxx.ru/api/PdfDownload");
 var filePath = cordova.file.externalDataDirectory + "card.pdf";

 var params = {};

 params.credentials_login = "xxxxxxx";
 params.credentials_random = "xxxx";
 params.credentials_time = "xxxxxxxxx";
 params.credentials_signature = "xxxxxxx";
 params.id = "xxxxxx";
 params.PdfType = "1";


 fileTransfer.download(
     uri,
     filePath,
     function(entry) {
         alert("download complete: " + entry.fullPath);
     },
     function(error) {
         alert("download error source " + error.source);
         alert("download error target " + error.target);
         alert("upload error code" + error.code);
     },
     false,
     params
 );

Upvotes: 2

Views: 2078

Answers (2)

Ivan Vasiljev
Ivan Vasiljev

Reputation: 31

I finally did it! The solution was to add ONE line:

xhr.responseType = "arraybuffer";

I tried this earlier, but got an error:

Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'arraybuffer').

Turned out, that this was because I tried to save this.responseText, instead of just this.response. I could't find any information about this error, so just moved on to other hypothesis.

Working code looks like this:

var data = "credentials_login=xxxx&credentials_time=xxxxxxxxxxxxx&credentials_random=xxxxx&credentials_signature=xxxxxxxxxxxxxxxxxxxxx&PdfType=xxxxx";

var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";  // <--- this thing kept me busy for 4 days!
                                  //(╮°-°)╮┳━━┳ ( ╯°□°)╯ ┻━━┻

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {

  $cordovaFile.writeFile(cordova.file.externalDataDirectory, "dc.pdf", this.response, true)
     .then(function(success) {
       console.log("success");
     }, function(error) {
       console.log(error.code);
     });
  }
});

xhr.open("POST", "http://xxxxxxx.ru/api/PdfDownload");
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("accept", "application/pdf");

xhr.send(data);

Upvotes: 1

Yaser
Yaser

Reputation: 5719

It might be easier for you to use the FileTransfer.download() method to download stuff from your server: http://docs.phonegap.com/en/edge/cordova_file_file.md.html#FileTransfer

var fileTransfer = new FileTransfer(); var uri = encodeURI("http://xxxxxxx.ru/api/PdfDownload");

fileTransfer.download(
    uri,
    filePath,
    function(entry) {
        console.log("download complete: " + entry.fullPath);
    },
    function(error) {
        console.log("download error source " + error.source);
        console.log("download error target " + error.target);
        console.log("upload error code" + error.code);
    },
    false,
    {
        headers: {
            "Authorization": "..."
        }
    }
);

Upvotes: 0

Related Questions