Angular 13 type conversion error from backend that returns BLOBs

Viewed 39

Angular and node's aren't my strong suits and I've had the misfortune of inheriting an angular 13 project where I'm tasked with implementing a minor JasperReport integration. To put it brief, 3 different fields from the form are grouped into params that get sent to the backend NODEJS server, which sends it to JasperReports Rest_v2 API which then generates a report with them, however the trouble I'm having is taking return data BLOB and converting it to a PDF file that appears as a file download browser side.

My NODEJS method for connecting to jasper reports rest api:

app.post('/api/accounts/report',(req,res)=>{
//Params from the API call
var acc_id = parseInt(req.body.params['acc_id']);
var start_date = req.body.params['start_date'];
var end_date = req.body.params['end_date'];
var sage_num = req.body.params['sage_num'];

var request = require("request");   
qs = require('querystring'),
request = request.defaults({
    jar: true
});
//Login call to jasper server
request.post({url: jasper_login, qs: {j_username:jasper_usr, j_password:jasper_pwd}},
    function(err, resp, body) {
        if(err) {
            return console.error(err);
        }
        //actual report call
        request.get(jasper_hst,
        function (error, response, body1) {
            if (error){
                console.log(response.statusCode);
                console.log(error);
            }
            res.type('arraybuffer').send(response.body);
        })
    }
)
}); 

this method returns the BLOB of data that is the PDF file e.g.:

Sample Data

However the problem I'm having now is a type conversion error as soon as I call the backend:

console error

My ts methods:

pdfExportBtn(e:any){
//harcoded params for testing
var params={"acc_id":"18785","start_date":"2022/05/01, 00:00:00","end_date":"2022/06/01, 00:00:00","sage_num":"12341234"};

//call the API and generate report
this.getReport(params).subscribe((response)=>{
  const newBlob = new Blob([response], {type: 'application/pdf'}); 
  const downloadLink = document.createElement('a'); 
  downloadLink.target = '_self'; const fileName = acc_name+' Transaction Summary '+date1+' to '+date2+'.pdf'; 
  const data = window.URL.createObjectURL(newBlob); downloadLink.href = data; 
  downloadLink.download = fileName; document.body.appendChild(downloadLink); 
  downloadLink.click();
});
}

getReport(params){
    return this.http.post<Blob>(`${environment.apiUrl}/api/accounts/report`,{responseType: 'arraybuffer'},{params});
}

But I'm specifying the return types as a blob and the 'array buffer' so I have no clue why its trying to parse into JSON.

0 Answers
Related