0

I have a very simple problem but unfortunately could not find a solution to it. I noticed on Stack Overflow there are many similar issues but none of them matches my problem completely.

I have an api server built on node and hapi which returns me a generated pdf file:

reply.file("./" + cfg.docRawFolder + "/" + doc._id + ".pdf");

This works fine. Now I have a web server also on hapi and would like to contact the pdf endpoint on the api server using jquery and ajax:

$.ajax({
          url: url,
          crossDomain: true,
          type:"GET",
          headers: {
            'Authorization': token1,
            'userid': userid,
            'deviceuid': deviceuid
          }
         }).done(function(data, textStatus, XMLHttpRequest) {
                  // some magic
         }).fail(function(err) {
            alert(JSON.stringify(err));
        });

The furthest I came is to get the returned garbage:

%PDF-1.5 %���� 1 0 obj <> endobj 2 0 obj <> endobj 3 0 obj <>/ProcSet[/PDF/Text/ImageB/ImageC/ImageI] >>/MediaBox[ 0 0 595.32 841.92] /Contents 4 0 R/Group<>/Tabs/S>> endobj 4 0 obj <> stream x�s ���w3T04��30SI��2T0BCs=#3K=#��\^.�t�����TY��X������ 4�)����B��Yo���P{L̍��M�jC�s+�p� t��1�zd�C)� endstream endobj 5 0 obj <> endobj 6 0 obj <> endobj 7 0 obj <> endobj 8 0 obj [ 226 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 487 0 0 0 0 0 468 0 0 0 0 0 0 479 525 0 0 0 0 0 0 0 0 0 230 799 525 527 0 0 0 391 0 0 0 715 0 453] endobj 9 0 obj <> stream x��}x�U��9�;-S2%3�$�df2�$�� �C%�jB �)��bY{Y���2@����������� ۪�H��~�gm��ww�����I���������3��c.�hؤʺ1�����l&�u=c)oW�WN�6����5�1� ...

displayed in the same window using:

document.open();
document.write(data);
document.close();

or popup by adding this to the ajax call:

dataType: "application/pdf"

Regardless what I do I always get this garbage displayed.

What I don't want to do:

  1. Expose pdfs as links on the api server
  2. Create a route on the web server to download and store the pdf from the api server and expose a link.

What I have to do:

  1. For the GET request pass 3 custom headers: the userid, deviceuid and Authorization, so I have to use ajax, no forms or iframes.

Ideally what I would like to achieve:

  1. Display the pdf stream as a document in a lightbox or just dislpay it no matter how, but not in garbage format. I know the returned garbage works fine as I can display the pdf correctly on Android.

Many thanks in advance Z

2
  • I don't think you can do that with AJAX. What you can do, however, is redirect the client to the URL that gives them the desired PDF.
    – uncoder
    Apr 10, 2015 at 21:37
  • You cannot display a binary file as text output without getting possible errors. The text is expecting Unicode (2 bytes per character), and it gets messed up. Apr 10, 2015 at 21:54

3 Answers 3

0

If you can do stuff on the server, you could write a method which would accept the headers as query string values, and then call send a request with those headers set to the api that you have, and send the response back to the client.

Then, on the client, instead of using $.ajax, you can simply redirect to the method which accepts the query string parameters.

0

Check out JavaScript blobs. You can make them fairly easily using Blob() like so:

var dataBlob;
var data = [];
function onReceived(data_gotten) { //Whatever your receive callback is
    data.push(data_gotten);
    dataBlob = new Blob(data);
    var obj = document.createElement('object');
    obj.setAttribute('data', dataBlob);
    obj.setAttribute('type', 'application/pdf');
    document.body.appendChild(obj);
}

Note: I have NOT tested this, and the code probably will not work. This is more of a theoretical way to use blobs in your situation.

0

Thanks, but when I contact the api server pdf endpoint with my web server endpoint and "forward" the reply.file(path_to_pdf) route from the api server as a reply(data.data) on the web server and in javascript I just do a window.open(web_forwarding_endpoint) I again get garbage. But when I remove the header requirements on the api server and do the same window.open(api_pdf_endpoint) I get a valid pdf rendered. So the issue must be somewhere with my web endpoint forwarding the api endpoint response: (using restling for rest):

rest.get( api_pdf_endpoint_url , { headers: { 'Authorization': token1, 'userid': userid, 'deviceuid': deviceuid }
} ).then(
    function(data)
    {
        fs.writeFile("./public/pdf/" + request.params.documentid + ".pdf", data.data, function(err) // This writes an empty pdf file
        {
            if(err)
            {
                console.log(err);
            }

            else
            {
                reply({message: "OK"}).code(200); 
            }
        });

        //reply(data.data); This generates garbage
    },

    function(error)
    {
        console.log(error.error);
    }
);

When I write the response to a file I get a valid but empty pdf generated. When I reply the response I get garbage on the web. Perhaps I do not handle the response from the api server correctly reply.file(path_to_pdf) and am unable to write it to a correct pdf file on the web server or display it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.