Search code examples
node.jsangularjsjson2csv

Catch the response in AngularJS function from a res.send csv file


I need to catch the response (I mean checking when the response from a NodeJS function return to the client, not like an error) from a NodeJS function.
When the button is clicked, a function with a form starts and NodeJS, after a query, returns a csv file. The problem is that the query is complex and it requires 1+ minutes to complete.

I need to make a loading spinner start when the button is clicked, and it should stop when the CSV is returning from the function. Any clue on how can I do that? Thanks in advance.

HTML form

<form name="csvForm" ng-submit="download(csvForm.$valid)">
  <div class="panel-body">
    <div class="row">
      <div class="form-group col-sm-4">
        <label class="control-label">Concessionaria<span ng-if="userProfileID != 1">*</span></label>
        <select class="form-control" ng-model="Dealer"
                ng-options="dealer.ID as dealer.Name for dealer in dealers " 
                ng-required="userProfileID != 1">
          <option value=""></option>
        </select>
      </div>

      <div class="form-group col-sm-4">
        <label class="control-label">Anno*</label>
        <select class="form-control" ng-model="Year"
                ng-options="y as y for y in syears" required>
          <option value=""></option>
        </select>
      </div>
    </div>


  </div>
  <div class="form-group col-sm-4 col-sm-offset-4" style="margin-top:20px">
    <button name="submitBtn" class="btn btn-lg btn-primary btn-block" type="submit" >Scarica CSV</button>
  </div>
</form>

Angular

$scope.download = function () {

   var form = document.createElement('form');
   form.action = apihost + "/queryReport/avanzEvaluation"; 
   form.method = 'POST';
   form.target = '_blank';
   form.style.display = 'none';

   var jsonData = {
      dealer: $scope.Dealer,
      year: $scope.Year
   };

   var inputJson = document.createElement('input');
   inputJson.type = 'text';
   inputJson.name = 'data';
   inputJson.value = JSON.stringify(jsonData);

   var submit = document.createElement('input');
   submit.type = 'submit';
   submit.id = 'submitProject';
   form.appendChild(inputJson);
   form.appendChild(submit);
   document.body.appendChild(form);

   //Send form.
   form.submit();
   document.body.removeChild(form);
};

NodeJS

router.post('/avanzEvaluation', function (req, res) {
    return new Promise(function(resolve,reject) {

        //Not the real query, just an example
        var sql = "SELECT * FROM Table ";

        return models.sequelize.query(sql, {replacements: replacements, type: models.sequelize.QueryTypes.SELECT })
        .then(function (results) {

            const Json2csvParser = require('json2csv').Parser;

            //Not real fields, just examples
            const fields = ["Field1", "Field2", "Field3", "Field4",];

            const opts = { fields };

            try {
                const parser = new Json2csvParser(opts);
                const csv = parser.parse(results);
                var filename = ("avanzValutazioni.csv");

                res.header("Content-Disposition","attachment;filename=" + filename); 
                res.setHeader('content-type', 'text/csv');
                res.send(iconv.encode(csv, 'iso-8859-1'));
            }
            catch (err) {
                console.error(err);
            }
        })
        .catch(function (err) {
            console.log(err);
        }); 
    })
});

Solution

  • I figured out how to do it, thanks to @georgeawg too!
    I resolved by returning a json with the filename and complete csv (csv format) without downloading it from the NodeJS function to the front end. Then I manipulate the result in front end to trigger the csv download with the result.

    AngularJS

    $scope.download = function () {
       //Spinner
       usSpinnerService.spin('spinner-1');
    
       //Custom data from the Form, sent as a JSON
       var jsonData = {
          year: $scope.Year
       };
       if($scope.Dealer) {
          jsonData.dealer = $scope.Dealer;
       }
    
       //I've could have done this with a options variable, but i prefer it inline
       $http.post(apihost + "/queryReport/avanzEvaluation_TEST", {data: jsonData}, {headers: {'Content-Type': 'application/json'}})
       .success(function (result) {
    
          //If the query returns a non-empty csv
          if(result.csv.length > 0) {
             usSpinnerService.stop('spinner-1');
    
             //This if-else is used to make it work on Edge too
             if (window.navigator.msSaveOrOpenBlob) {
                var blob = new Blob([result.csv]);
                window.navigator.msSaveOrOpenBlob(blob, result.filename);
             } 
             else {
                var a = document.createElement("a");
                a.href = "data:attachment/csv," +  encodeURIComponent(result.csv);
                a.target = "_blank";
                a.download = result.filename;
                document.body.appendChild(a);
                a.click();
             }
          }
          //Otherwise I show an error with the module Notification
          else {
             Notification.error("Non è stato possibile eseguire il download del file CSV.");
          }       
       });
    }
    

    NodeJS

    router.post('/avanzEvaluation_TEST', function (req, res) {
        return new Promise(function(resolve,reject) {
    
            //Not the real query, just an example
            var sql = "SELECT * FROM Table ";
    
            return models.sequelize.query(sql, {replacements: replacements, type: models.sequelize.QueryTypes.SELECT })
            .then(function (results) {
    
                const Json2csvParser = require('json2csv').Parser;
    
                //Not real fields, just examples
                const fields = ["Field1", "Field2", "Field3", "Field4",];
    
                const opts = { fields };
    
                try {
                    const parser = new Json2csvParser(opts);
                    const csv = parser.parse(results);
                    var filename = ("avanzValutazioni.csv");
    
                    res.json({filename: filename, csv: csv});
                }
                catch (err) {
                    console.error(err);
                }
            })
            .catch(function (err) {
                console.log(err);
            }); 
        })
    });