Open PDF in new browser window with AJAX call

PrasadWeeraa

I'm developing web application using nodejs and jquery. There is a reporting part in it. When a user sends some data to server using ajax call (Here I use 'get' method for make easing the question), it should send pdf to the client side and should show in a pop up window.

I used jsreport for server side for generate reports.

Here is the Node js server code.

.get('/testPdf', async function (req, res, next) {

    var htmlNew = '<html> ' +
        '<head> ' +
        '</head> ' +
        '<body> ' +
        '<h2>Hello World</h2>' +
        '</body> ' +
        '</html> ';

    return jsreport.render({
        template: {
            content: htmlNew,
            engine: 'handlebars',
            recipe: 'chrome-pdf'
        },
    }).then((resp) => {
        var data = resp.content;
        res.contentType("application/pdf;base64");
        res.send(data);
    });
})

This is the code of client jquery.

function myPdfRun() {
    console.log('Call')
    $.ajax({
        type: 'get',
        url: serverLocation + "/api/dashboard/testPdf",
        contentType: "application/json; charset=UTF-8",
        success: function (response) {

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

        },
        error: function (textStatus, errorThrown) {
            console.log('Err');
        }
    });
}

I try few things for doing my task. Below codes executed inside of success in ajax call.

TRY 1

window.open("data:application/pdf," + response);

It was open new tab and it is blank.

TRY 2

Using download js,

download.bind(response, "mydownload.pdf", "application/pdf");

Nothing happen. Only success trigger.

TRY 3

download(response, "mydownload.pdf", "application/pdf;base64");

Pdf is downloaded. But content is not there. Just white sheet appears.

TRY 4

(This code got from a forum)

var a = document.createElement('a');
var pdfAsDataUri = "data:application/pdf;base64," + response;
a.download = 'export.pdf';
a.type = 'application/pdf';
a.href = pdfAsDataUri;
a.click();

A pdf file is downloaded. But cannot even open it.

TRY 5

window.open("data:application/pdf," + response);

open new window. But there is a error log in console window.

Error : Not allowed to navigate top frame to data URL: data:application/pdf,%PDF-1.4%0A%.................

The best part is, when I call to the Node js api directly (http://localhost:9176/api/dashboard/testPdf) from the browser, it is successfully open the pdf. It means there is no problem in server side or return information.

Please show me a direction to open pdf in new window using Ajax call.

jan_blaha

Duplicate of https://stackoverflow.com/questions/51920230/open-pdf-in-new-window-with-ajax-call

PrasadWeeraa

Yes. That also my question. Stack-overflow did not respond to my issue. I'm stuck on this since few days.

bjrmatos

res.contentType("application/pdf;base64");

why you need this? resp.content is a buffer not a base64 string so i think you are sending a bad header from the server, just use res.contentType("application/pdf")

for your client side part, i think you are better by using our browser client which contains some examples to show the pdf in new window. if for some reason you still want to handle the ajax request by yourself and not with our browser client then check the source code to better know how to handle the binary response