Recurly pdf invoice retrieving with JavaScript and Node.js (Meteor)

Question

We are developing an app with Recurly integration and trying to use it PDF Invoice function.

The app is based on Node.js (Meteor platform).

It receives correct answer from Recurly with binary file:

But I can't correctly save it. I've tried two ways: print it on the client side in browser:

var file = window.URL.createObjectURL(new Blob([r.content], {type: "application/pdf"}));
  var a = document.createElement("a");
  a.href = file;
  a.download = "invoicePDF";
  document.body.appendChild(a);
  a.click();

  window.onfocus = function () {
   document.body.removeChild(a)
  }

And save it directly on server (just for test):

var fs = require('fs');
var wstream = fs.createWriteStream('C:/recurly.pdf');
wstream.write(result.content);
wstream.end();

But in both cases I've ended up with non-working pdf file. Acrobat, Foxit reader and Chrome cann't open this file — it's damaged.

Do you have any suggestions where I'm wrong? Maybe I need some content convertation before saving it or anything else?

Added

The result of this request I've sent to client and printed in console (image above).

try {
      result = HTTP.call(
        'GET',
        'https://' + Meteor.settings.recurly.SUBDOMAIN + '.recurly.com/v2/invoices/' + invoiceId,
        {
          headers: {
            Authorization: "Basic " + (new Buffer(Meteor.settings.recurly.API_KEY)).toString('base64'),
            Accept: 'application/pdf'
          }
        }
      );
    } catch (err) {
      result = e;
    }

How did you obtain the data? Did you set the `blob` responseType? — MasterAM, Jun 28 '16 at 08:04
@MasterAM I've used recurly docs to obtain the data. https://dev.recurly.com/docs/lookup-invoice-details — Nikolay Aleshkovskiy, Jun 28 '16 at 08:35

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

The problem is you are trying to obtain a binary file with a request that expects an encoded string as a response.

Your best option is to tell the request library what it should expect, otherwise you will have to manually pry the binary data out of the UTF-16- or UTF-8-encoded string.

There is a difference between the client and server implementations.

server

The server implementation uses node's request module. You can supply options for it using npmRequestOptions.

As stated in its documentation:

encoding - Encoding to be used on setEncoding of response data. If null, the body is returned as a Buffer. Anything else (including the default value of undefined) will be passed as the encoding parameter to toString() (meaning this is effectively utf8 by default). (Note: if you expect binary data, you should set encoding: null.)

So, on the server you can do something like:

try {
  result = HTTP.call(
    'GET',
    'https://' + Meteor.settings.recurly.SUBDOMAIN + '.recurly.com/v2/invoices/' + invoiceId,
    {
      headers: {
        Authorization: "Basic " + (new Buffer(Meteor.settings.recurly.API_KEY)).toString('base64'),
        Accept: 'application/pdf'
      },
      npmRequestOptions: {
        encoding: null // will cause the result to be stored in a binary Buffer
      }
    }
  );

  // will write the file in binary mode
  fs.writeFile(outFileName, res.content, 'binary');
} catch (err) {
  result = e;
}

client

The client implementation uses XHR.

In order to handle binary response, you need to change the XHR's responseType to (preferably) 'blob'.

Unfortunately, I see no way getting a binary blob in Meteor's current implementation of the HTTP package, as it expect the response to have a responseText.

You can directly use an XMLHttpRequest object, but you may need add some wrapper code to support dying browsers (IE6, I'm looking at you! - the usual new ActiveXObject('Microsoft.XMLHttp'); dance).

This could be achieved using something like the following code:

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('Authorization', ...);
xhr.responseType = 'blob'; // this is key

xhr.onload = function(e) {
  if (this.status == 200) {
    // this.response is a Blob. If you are sure that it is of the
    // correct content-type, you can use it to construct the URL directly
    let blob = new Blob([this.response], {type: 'application/pdf'});
    let url = URL.createObjectURL(blob);
    let a = document.createElement("a");
    a.href = url;
    a.download = "invoice.pdf";
    document.body.appendChild(a);
    ...
  }
};

xhr.send();

Which sends an XHR that encodes the response into a binary Blob and generates an ObjectURL with the correct data.

thank you very much! `encoding: null` — was the key, now I receive a pdf correctly by a server. For now I use base64 encoding for the request result `return new Buffer(result.content).toString('base64');` And then open it with JavaScript on the client `window.open("data:application/pdf;base64, " + r);` But as I know it's not the best option? I've researched some ways to pass Binary files from Node.js to Client, but haven't found the solution yet. Do you have any ideas how to transfer pdf from client to server in the best way? Anyway, thank you again for your help! — Nikolay Aleshkovskiy, Jun 28 '16 at 13:30

Recurly pdf invoice retrieving with JavaScript and Node.js (Meteor)

1 Answers1

server

client