Puede hacerlo solo en el lado del cliente, en un navegador que acepte URI de datos :

 data:application/csv;charset=utf-8,content_encoded_as_url

En su ejemplo, el URI de datos debe ser:

 data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333

Puede llamar a este URI por:

• usando window.open
• o configurando la window.location
• o por el href de un ancla
• al agregar el atributo de download , funcionará en Chrome, aún tiene que probar en IE.

Para probar, simplemente copie los URI anteriores y péguelos en la barra de direcciones de su navegador. O pruebe el ancla a continuación en una página HTML:

 <a download="somedata.csv" href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Example</a>

Para crear el contenido, obteniendo los valores de la tabla, puede usar table2CSV y hacer:

 var data = $table.table2CSV({delivery:'value'}); $('<a></a>') .attr('id','downloadFile') .attr('href','data:text/csv;charset=utf8,' + encodeURIComponent(data)) .attr('download','filename.csv') .appendTo('body'); $('#downloadFile').ready(function() { $('#downloadFile').get(0).click(); });

La mayoría de las versiones de IE, si no todas, no admiten la navegación a un enlace de datos, por lo que se debe implementar un truco, a menudo con un iframe . Usando un iFrame combinado con document.execCommand('SaveAs'..) , puede obtener un comportamiento similar en la mayoría de las versiones de IE que se usan actualmente.

Esta es mi implementación (basada en: https://gist.github.com/3782074 ):

Uso : HTML:

 <table class="download">...</table> <a href="" download="name.csv">DOWNLOAD CSV</a>

JS:

 $("a[download]").click(function(){ $("table.download").toCSV(this); });

Código :

 jQuery.fn.toCSV = function(link) { var $link = $(link); var data = $(this).first(); //Only one table var csvData = []; var tmpArr = []; var tmpStr = ''; data.find("tr").each(function() { if($(this).find("th").length) { $(this).find("th").each(function() { tmpStr = $(this).text().replace(/"/g, '""'); tmpArr.push('"' + tmpStr + '"'); }); csvData.push(tmpArr); } else { tmpArr = []; $(this).find("td").each(function() { if($(this).text().match(/^-{0,1}\d*\.{0,1}\d+$/)) { tmpArr.push(parseFloat($(this).text())); } else { tmpStr = $(this).text().replace(/"/g, '""'); tmpArr.push('"' + tmpStr + '"'); } }); csvData.push(tmpArr.join(',')); } }); var output = csvData.join('\n'); var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(output); $link.attr("href", uri); }

Notas :

• Utiliza etiquetas "th" para encabezados. Si no están presentes, no se añaden.
• Este código detecta números en el formato: -####.## (Deberá modificar el código para aceptar otros formatos, por ejemplo, usar comas).

ACTUALIZAR :

Mi implementación anterior funcionó bien, pero no estableció el nombre de archivo csv. El código se modificó para usar un nombre de archivo, pero requiere un elemento < a >. Parece que no puede generar dinámicamente el elemento < a > y activar el evento "clic" (¿quizás por razones de seguridad?).

MANIFESTACIÓN

http://jsfiddle.net/nLj74t0f/

(Desafortunadamente, jsfiddle no puede generar el archivo y, en su lugar, arroja un error: 'utilice la solicitud POST', no permita que ese error le impida probar este código en su aplicación).

Recientemente publiqué una biblioteca de software libre para esto: "html5csv.js" -- GitHub

Su objetivo es ayudar a agilizar la creación de pequeñas aplicaciones de simulación en Javascript que podrían necesitar importar o exportar archivos csv, manipular, mostrar, editar datos, realizar varios procedimientos matemáticos como ajuste, etc.

Después de cargar "html5csv.js", el problema de escanear una tabla y crear un CSV es simple:

 CSV.begin('#PrintDiv').download('MyData.csv').go();

Aquí hay una demostración de JSFiddle de su ejemplo con este código .

Internamente, para Firefox/Chrome esta es una solución orientada a URL de datos, similar a la propuesta por @italo, @lepe y @adeneo (en otra pregunta). Para IE

La llamada CSV.begin() configura el sistema para leer los datos en una matriz interna. Entonces se produce esa búsqueda. Luego .download() genera un enlace de URL de datos internamente y hace clic en él con un clicker de enlace. Esto envía un archivo al usuario final.

Según caniuse , IE10 no es compatible con <a download=...> . Entonces, para IE, mi biblioteca llama a navigator.msSaveBlob() internamente, como lo sugiere @Manu Sharma