Open/download pdf from API in JS

[pohm...@gmail.com]

Hi, 

I contact the API for a report, fetch the response but it always opens a blank PDF.

I use react.js

I do it that way: 

onExport: (response) ->
    window.open("data:application/pdf," + escape(response.text));

How should I handle the response to open/directly download the PDF file from the response ??

When I change the output to html, the html works like a charm.

Thanks a lot for any help

[Jan Blaha]

Hi,

using windows.open limits you to quite small pdf files.

It would be better to do a http post into the hidden html form with _blank target. This is already provided by jsreport browser sdk http://jsreport.net/learn/embedding

or you can just extract what you need from https://github.com/jsreport/jsreport/blob/master/extension/embedding/public/js/embed.js#L150

[pohm...@gmail.com]

Thanks! Yes It worked that way, but I need this to do it that way: 

1. Send request from javascript with some properties for the report to a API proxy (express server that adds authentication headers)
2. The API proxy send it to our REST client, fetches the data from DB and send it to jsreport server
3. Jsreport creates the template and send it back -> Rest -> api proxy -> to frontend app
4. frontend - fetch response -> show od download the file/html

So I have the response with the data, but the encoding is wrong (it only shows a blank PDF) and I don't know to which I should set it: 

I saw that you set it to xhr.responseType = 'arraybuffer'; But I don't know how to set it properly from the jsreport response.

I do the request with https://visionmedia.github.io/superagent/

onExport: (response) -> // the response from jsreport server

    template =
        shortid : "N1PIxBjkl"
        recipe: "phantom-pdf"
        engine: "handlebars"

    buffer = ?????? how to convert the response.text to a appropriate format

    $('.export-data-options').html("");
    pdfObject = $("<object type='application/pdf' style='width:100%;height:100%'></object>");
    pdfObject.attr("data", "data:application/pdf;base64," + @arrayBufferToBase64(buffer));
    $('.export-data').append(pdfObject);
    ###jsreport.render($(".export-data-options"), template);###   - this worked for me

I hope you understand me, what I described. 

[Jan Blaha]

Did you check if it works in firefox? Chrome has some issues with embedded objects https://productforums.google.com/forum/#!topic/chrome/428NG5agplI

Working version for firefox https://jsfiddle.net/t6nbcp1k/

I would recommend to use rather iframes if you want to display pdf inside the page. Simply submit html form with the iframe target and you get the pdf displayed in all browsers. This is what jsreport.render does by default.

[pohm...@gmail.com]

I tried it and it worked in chrome too. I copied the necessary logic from the embed.js to my own js file and with the request from frontend directly to jsreport server worked and the pdf was drawn to my template.

The problem is that I can't set the right encoding when the jsreport response arrives from our api proxy. All headers are properly set, only I don't know how should I format the pdf response to base64.

When I use the embed.js to test it only https://github.com/jsreport/jsreport/blob/master/extension/embedding/public/js/embed.js#L97

Then I want to pass the request that way that I described  - trough our API. The response is like it should be

But I don't have it parsed in arraybuffer format (https://github.com/jsreport/jsreport/blob/master/extension/embedding/public/js/embed.js#L104) and the pdf is blank

[Jan Blaha]

Ok, so the problem is somewhere in your server side right?

jsreport nodejs client should do the work right.

https://github.com/jsreport/nodejs-client/blob/master/lib/client.js

You just need to pipe the response to the express response, see Chaining response stream

http://jsreport.net/learn/nodejs-client

[pohm...@gmail.com]

Yes I tried the client earlier, it worked but I can't use it on a public javascript frontpage (the credentials are visible for all users, they can read the source code).

Therefore it must go trough our rest api client first. And we already use the pipe stream and all works like expected, we receive the same response like from the jsreport server.

But on our frontpage we must decode the response like you do here https://github.com/jsreport/jsreport/blob/master/extension/embedding/public/js/embed.js#L113 and than to base64 https://github.com/jsreport/jsreport/blob/master/extension/embedding/public/js/embed.js#L116

I don't have the responseText encoded in arraybuffer. We don't use the XMLHttpRequest(); so I can't set it to the arraybuffer encoding.

[pohm...@gmail.com]

I found this now https://github.com/visionmedia/superagent/pull/655 the set response type is not supported via the superagent that I use to make the request. Is there a another option to parse the response from jsreport as to set the xhr response type to arraybuffer ? Or I make my own request without the library and it should work I think.

[Jan Blaha]

I don't know, but doing a request on your own sounds like a simple solution.