3

Estoy exportando un Json a csv, el problema que me esta ocurriendo es que al ejecutar la pantalla en internet explorer la pestaña se queda como cargando o deja una pantalla en blanco abierta con la etiqueta about:blob.

El csv si se descarga correctamente, excepto el detalle que describo anteriormente.

No estoy seguro, si el error puede deberse a que debo limpiar el object blob al terminar la instrucción.

Si alguien puede ayudarme muchas gracias.

Página en blanco Pestaña cargando

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
  }
}

2
  • Te recomiendo trabajar con mozilla firefox y usar el modo debug, a su vez te facilito un link donde encontraras un claro ejemplo de lo que buscas: exportar Json a CSV suerte !! Commented el 3 abr. 2018 a las 21:21
  • Gracias por la información, el ejemplo del link solo funciona en Google Chrome pero no en explorer, derivado de eso es que hice las modificaciones en mi ejemplo, que también derivó en el error que indico y también modifique el ejemplo del link con el mismo resultado. Gracias por tu ayuda. Commented el 3 abr. 2018 a las 22:13

1 respuesta 1

1

El problema está en la función jsonExportarExcel.

En el caso en el que el siguiente if se cumpla:

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

Estás descargándolo mediante la función de internet explorer msSaveBlob (lo cual es correcto), pero además fuerzas la descarga creando el enlace y haciendo clic, lo cual es incorrecto en IE.

Sustituye la función de esta forma y habrás resuelto tu problema:

    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
      }
    }

Espero que sea de utilidad

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.