Open pdf in new window with Ajax call
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");
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.
Answer
php
$base64 = chunk_split(base64_encode(file_get_contents('YOUR PDF FILE')));
echo $base64 ;
java script
var a = document.createElement('a');
a.href= "data:application/octet-stream;base64,"+response;
a.target = '_blank';
a.download = 'filename.pdf';
a.click();