Home / Questions / 152682
Accepted
raintrooper
Asked: 2020-04-04 13:10:05 +0800 CST 2020-04-04 13:10:05 +0800 CST

Export json to csv leaves symbol in loading tab and opens blank page

  • 772

I am exporting a Json to csv, the problem that is happening to me is that when I run the screen in internet explorer the tab stays loading or leaves a blank screen open with the label about:blob.

The csv is downloaded correctly, except for the detail that I describe above.

I'm not sure if the error could be because I have to clean up the blob object at the end of the statement.

If anyone can help me thank you very much.

blank page loading tab

var json = [{
  "CentroDeCosto": "4604878  ",
  "NombreCentroDeCosto": "Cabezal M/kenworth ",
  "Fecha": "03/04/2018",
  "Ubicacion": "Servicio Rapido",
  "Latitud": 0,
  "Longitud": 0
}, {
  "CentroDeCosto": "4604878  ",
  "NombreCentroDeCosto": "Cabezal M/kenworth ",
  "Fecha": "03/04/2018",
  "Ubicacion": "Servicio Rapido",
  "Latitud": 0,
  "Longitud": 0
}, {
  "CentroDeCosto": "4604878  ",
  "NombreCentroDeCosto": "Cabezal M/kenworth ",
  "Fecha": "03/04/2018",
  "Ubicacion": "Servicio Rapido",
  "Latitud": 0,
  "Longitud": 0
}];

jsonExportarExcel(json, "Pruebas", true)

function jsonExportarExcel(data, tituloDelReporte, ShowLabel) {
  var arrData = typeof data != 'object' ? JSON.parse(data) : data;

  var CSV = '';

  CSV += tituloDelReporte + '\r\n\n';

  if (ShowLabel) {
    var row = "";

    //This loop will extract the label from 1st index of on array
    for (var index in arrData[0]) {

      //Now convert each value to string and comma-seprated
      row += index + ',';
    }

    row = row.slice(0, -1);
    //append Label row with line break
    CSV += row + '\r\n';
  }

  //1st loop is to extract each row
  for (var i = 0; i < arrData.length; i++) {
    var row = "";

    //2nd loop will extract each column and convert it in string comma-seprated
    for (var index in arrData[i]) {
      row += '"' + arrData[i][index] + '",';
    }

    row.slice(0, row.length - 1);
    //add a line break after each row
    CSV += row + '\r\n';
  }

  if (CSV == '') {
    alert("Invalid data");
    return;
  }

  //Generate a file name
  var fileName = "MyReport_";
  //this will remove the blank-spaces from the title and replace it with an underscore
  fileName += tituloDelReporte.replace(/ /g, "_");

  if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) //IF IE > 10
  {
    var a = document.createElement('a'),
      file = new Blob([CSV], {
        type: 'text/csv;charset=utf-8,%EF%BB%BF'
      });

    window.navigator.msSaveBlob(file, fileName + ".csv");

    a.href = URL.createObjectURL(file), a.download = fileName + ".csv";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } else {
    var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

    //this trick will generate a temp <a /> tag
    var link = document.createElement("a");
    link.href = uri;

    //set the visibility hidden so it will not effect on your web-layout
    link.style = "visibility:hidden";
    link.download = fileName + ".csv";

    //this part will append the anchor tag and remove it after automatic click
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    //Finaliza exportar en chrome
  }
}

javascript

1 Answers

  1. Best Answer

    The problem is in the jsonExportarExcel function.

    In the case in which the following if is fulfilled:

    if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) //IF IE > 10

    You're downloading it via internet explorer's msSaveBlob function (which is correct), but you're also forcing the download by creating the link and clicking, which is incorrect in IE.

    Replace the function like this and you will have solved your problem:

        function jsonExportarExcel(data, tituloDelReporte, ShowLabel) {
      var arrData = typeof data != 'object' ? JSON.parse(data) : data;

      var CSV = '';

      CSV += tituloDelReporte + '\r\n\n';

      if (ShowLabel) {
        var row = "";

        //This loop will extract the label from 1st index of on array
        for (var index in arrData[0]) {

          //Now convert each value to string and comma-seprated
          row += index + ',';
        }

        row = row.slice(0, -1);
        //append Label row with line break
        CSV += row + '\r\n';
      }

      //1st loop is to extract each row
      for (var i = 0; i < arrData.length; i++) {
        var row = "";

        //2nd loop will extract each column and convert it in string comma-seprated
        for (var index in arrData[i]) {
          row += '"' + arrData[i][index] + '",';
        }

        row.slice(0, row.length - 1);
        //add a line break after each row
        CSV += row + '\r\n';
      }

      if (CSV == '') {
        alert("Invalid data");
        return;
      }

      //Generate a file name
      var fileName = "MyReport_";
      //this will remove the blank-spaces from the title and replace it with an underscore
      fileName += tituloDelReporte.replace(/ /g, "_");

      if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) //IF IE > 10
      {
        var file = new Blob([CSV], {
            type: 'text/csv;charset=utf-8,%EF%BB%BF'
          });

        window.navigator.msSaveBlob(file, fileName + ".csv");
      } else {
        var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

        //this trick will generate a temp <a /> tag
        var link = document.createElement("a");
        link.href = uri;

        //set the visibility hidden so it will not effect on your web-layout
        link.style = "visibility:hidden";
        link.download = fileName + ".csv";

        //this part will append the anchor tag and remove it after automatic click
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        //Finaliza exportar en chrome
      }
    }

    I hope you find it useful

    • 1