6

El usuario cuenta con Excel como aplicación predeterminada para abrir archivos CSV y desea que luego de descargar un archivo CSV de mi aplicación al hacer doble clic en este y ser abierto en Excel, los diacríticos se vean correctamente.

Los datos son

País    Estado      Ciudad
México  Nuevo León  Monterrey
México  Tamaulipas  Güémez

pero se ven de la siguiente forma

Estado  Ciudad  
México Nuevo León Monterrey
México Tamaulipas  Güémez

Adapté el código de Use JavaScript to Export Your Data as CSV para poder explicar la situación de forma general con un ejemplo completo mínimo y verificable.

  • Se tiene datos en una matriz de objetos que incluyen diacríticos
  • Se genera un enlace para descargar los datos como archivos CSV.

var datos = [
  {
    País: "México",
    Estado: "Nuevo León",
    Ciudad: "Monterrey"
  },
  {
    País: "México",
    Estado: "Tamaulipas",
    Ciudad: "Güémez"
  }
];

function convertArrayOfObjectsToCSV(args) {
  var result, ctr, keys, columnDelimiter, lineDelimiter, data;

  data = args.data || null;
  if (data == null || !data.length) {
    return null;
  }

  columnDelimiter = args.columnDelimiter || ',';
  lineDelimiter = args.lineDelimiter || '\n';

  keys = Object.keys(data[0]);

  result = '';
  result += keys.join(columnDelimiter);
  result += lineDelimiter;

  data.forEach(function(item) {
    ctr = 0;
    keys.forEach(function(key) {
      if (ctr > 0) result += columnDelimiter;

      result += item[key];
      ctr++;
    });
    result += lineDelimiter;
  });

  return result;
}

function downloadCSV(args) {
  var data, filename, link;

  var csv = convertArrayOfObjectsToCSV({
    data: datos
  });
  if (csv == null) return;

  filename = args.filename || 'export.csv';

  if (!csv.match(/^data:text\/csv/i)) {
    csv = 'data:text/csv;charset=utf-8' + csv;
  }
  data = encodeURI(csv);

  link = document.createElement('a');
  link.setAttribute('href', data);
  link.setAttribute('download', filename);
  link.click();
}
<a href='#' onclick='downloadCSV({ filename: "ciudades-con-diacríticos.csv" });'>Descargar CSV</a>

Sobre lo que he intentado para solucionarlo encontré que agregar el caracter BOM genera una excepción ya que utf-8 es de caracter simple y no funciona en Mac, y también intenté reemplazando utf-8 por utf-8-sig y agregué los octetos 0xEF,0xBB,0xBF pero no me funcionarion.

Pregunta en inglés relacionada

Microsoft Excel mangles Diacritics in .csv files?

6 respuestas 6

8

He probado con Windows 10 64bits con Excel 2016 y funciona. Si pruebas con otro SO y/o versión de Excel por favor deja un comentario con los datos.

La solución es usar utf-16 en lugar de utf-8 y agregar el caracter de marca de orden de bytes (BOM por sus siglas en inglés) \uFEFF.

El código de la pregunta quedaría de la siguiente forma

var datos = [
  {
    País: "México",
    Estado: "Nuevo León",
    Ciudad: "Monterrey"
  },
  {
    País: "México",
    Estado: "Tamaulipas",
    Ciudad: "Güémez"
  }
];

function convertArrayOfObjectsToCSV(args) {
  var result, ctr, keys, columnDelimiter, lineDelimiter, data;

  data = args.data || null;
  if (data == null || !data.length) {
    return null;
  }

  columnDelimiter = args.columnDelimiter || ',';
  lineDelimiter = args.lineDelimiter || '\n';

  keys = Object.keys(data[0]);

  result = '';
  result += keys.join(columnDelimiter);
  result += lineDelimiter;

  data.forEach(function(item) {
    ctr = 0;
    keys.forEach(function(key) {
      if (ctr > 0) result += columnDelimiter;

      result += item[key];
      ctr++;
    });
    result += lineDelimiter;
  });

  return result;
}

function downloadCSV(args) {
  var data, filename, link;

  var csv = convertArrayOfObjectsToCSV({
    data: datos
  });
  if (csv == null) return;

  filename = args.filename || 'export.csv';

  if (!csv.match(/^data:text\/csv/i)) {
    csv = 'data:text/csv;charset=utf-16,\uFEFF' + csv;
  }
  data = encodeURI(csv);

  link = document.createElement('a');
  link.setAttribute('href', data);
  link.setAttribute('download', filename);
  link.click();
}
<a href='#' onclick='downloadCSV({ filename: "ciudades-con-diacríticos.csv" });'>Descargar CSV</a>

1
  • 1
    he probado con Office 2007, Office 2010, y el 2013 y todo perfecto.
    – ByGroxD
    Commented el 28 jun. 2017 a las 17:15
3
+100

Otra solución es agregar el %EF%BB%BF (utf-8 BOM) al principio del texto CSV

var datos = [
  {
    País: "México",
    Estado: "Nuevo León",
    Ciudad: "Monterrey"
  },
  {
    País: "México",
    Estado: "Tamaulipas",
    Ciudad: "Güémez"
  }
];

function convertArrayOfObjectsToCSV(args) {
  var result, ctr, keys, columnDelimiter, lineDelimiter, data;

  data = args.data || null;
  if (data == null || !data.length) {
    return null;
  }

  columnDelimiter = args.columnDelimiter || ',';
  lineDelimiter = args.lineDelimiter || '\n';

  keys = Object.keys(data[0]);

  result = '';
  result += keys.join(columnDelimiter);
  result += lineDelimiter;

  data.forEach(function(item) {
    ctr = 0;
    keys.forEach(function(key) {
      if (ctr > 0) result += columnDelimiter;

      result += item[key];
      ctr++;
    });
    result += lineDelimiter;
  });

  return result;
}

function downloadCSV(args) {
  var data, filename, link;

  var csv = convertArrayOfObjectsToCSV({
    data: datos
  });
  if (csv == null) return;

  filename = args.filename || 'export.csv';

  data = 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURI(csv);

  link = document.createElement('a');
  link.setAttribute('href', data);
  link.setAttribute('download', filename);
  link.click();
}
<a href='#' onclick='downloadCSV({ filename: "ciudades-con-diacríticos.csv" });'>Descargar CSV</a>

5
  • 1
    @Rubén, leyendo la respuesta en SOen a la que haces referencia, ahi mismo dice lo que comentas (no hay referencia a nada) solo que supuestamente en Excel 2003 y versiones anteriores y que en Excel 2007 y posteriores ya no da error. La verdad que desde el 2008 al 2017 es muy posible que hayan lanzado alguna actualización para solucionar esto.
    – Marcos
    Commented el 22 jun. 2017 a las 19:40
  • Bueno, pues en la pregunta, de forma muy escueta sintetizo los comentarios en la pregunta referida. En cualquier caso, en Windows 10 64bits con Excel 2016 me funciona bien tu código. ¿Me podrías decir con cuál SO y Excel has probado?
    – Rubén
    Commented el 22 jun. 2017 a las 20:02
  • 1
    @Rubén, Tengo exactamente los mismos, Windows 10 64bits y Excel 2016
    – Marcos
    Commented el 22 jun. 2017 a las 20:07
  • 1
    @Rubén, lo acabo de probar en macOS Sierra (v10.12.3) y TextEdit y también funciona
    – Marcos
    Commented el 22 jun. 2017 a las 20:16
  • Continuemos el debate en el chat.
    – Rubén
    Commented el 22 jun. 2017 a las 20:16
0

Saludos, las soluciones que plantean mas arriba resuelven el inconveniente, pero no lo solucionan, aqui el problema es in problema de fondo, intervienen varios factores, dentro de los que destaca el Sistema operativo (cada uno esta configurado diferente)

Mi recomendacion es que no exportes a CVS, sino directamente a excel, con esto, almenos no tendras problemas con los caracteres,

De igual forma no te recomiendo que uses javascript para esta labor, major genera el reporte en el servidor y exportalo al cliente

1
  • El problema no tiene que ver con el sistema operativo sino con Excel y podría decirse que las versiones antiguas tenían dos problemas, la codificación predeterminada y una excepción que ocurría en archivos utf-8 con BOM. Cada formato tiene sus ventajas y desventajas, la pregunta no trata sobre ello. En cuando a la recomendación con JavaScript falta que digas el motivo por el que no lo recomiendas. De todas formas, gracias por responder.
    – Rubén
    Commented el 28 jun. 2017 a las 14:01
0

¿Y si a tu HTML le agregas el meta:

<meta charset="UTF-8">

?

También, especifícale al servidor web que la codificación de lo que "sirve" es UTF-8. Dependiendo del servidor que uses, esto cambiará. En apache tienes que agregar al httpd.conf (o equivalente) lo siguiente:

AddDefaultCharset utf-8
1
  • Lo de la etiqueta meta no tiene ningún efecto en el caso de servir un csv
    – Rubén
    Commented el 27 jun. 2017 a las 20:42
0

Debes añadir la UTF-8 BOM al comienzo, algo como:

var contenidocsv = "data:text/csv;charset=utf-8,%EF%BB%BF";

Se probó en excel 2013 y funcionó.

1
  • Es prácticamente lo mismo que se recomienda en la respuesta de Marcos Gallardo, sólo que sin un ejemplo completo, con la salvedad que se hace mención de la versión de Excel en la que se probó.
    – Rubén
    Commented el 29 jun. 2017 a las 2:43
0

Te estás complicando la vida intentando reinventar la rueda. Excel tiene opciones para importar un CSV con cualquier codificación de caracteres.

  1. Datos > Obtener Datos desde el texto/CSV

    Datos > Obtener datos

  2. Seleccionar el archivo

  3. Seleccionar codificación y Delimitador

    Opciones de importación

  4. Click en el botón Cargar y listo!



Si se ve mal, estás usando la codificación incorrecta, probá con otra. Las más comunes son:

  • 65001: Unicode (UTF-8)
  • 1252: Europeo occidental (Windows)

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.