2009-05-28 21 views
30

Estoy usando la tabla jQuery para el complemento CSV. He alterado la ventana emergente para que le indique al navegador que descargue un archivo CSV.jQuery Tabla a exportación CSV

que era:

function popup(data) { 
    var generator = window.open('', 'csv', 'height=400,width=600'); 
    generator.document.write('<html><head><title>CSV</title>'); 
    generator.document.write('</head><body >'); 
    generator.document.write('<textArea cols=70 rows=15 wrap="off" >'); 
    generator.document.write(data); 
    generator.document.write('</textArea>'); 
    generator.document.write('</body></html>'); 
    generator.document.close(); 
    return true; 
} 

he cambiado a:

function popup(data) { 
    window.location='data:text/csv;charset=utf8,' + encodeURIComponent(data); 
    return true; 
} 

Funciona, en su mayor parte. Todavía requiere que encuentre su software de hoja de cálculo y cree su propio nombre de archivo ... porque crea un nombre de archivo extraño (Ejemplo: 14YuskG_.csv.part).

¿Alguna sugerencia sobre cómo mejorar esto?

+4

Tabla jQuery Plugin a CSV: http://www.kunalbabre.com/projects/table2CSV.php, gracias Kunal Babre – timborden

Respuesta

20

encontrado una solución que funciona (con ayuda de http://www.topsemtips.com/2008/11/save-html-table-to-excel-using-jquery/):

he cambiado la función de:

function popup(data) { 
    $("#main div.inner").append('<form id="exportform" action="export.php" method="post" target="_blank"><input type="hidden" id="exportdata" name="exportdata" /></form>'); 
    $("#exportdata").val(data); 
    $("#exportform").submit().remove(); 
    return true; 
} 

y creó el archivo export.php:

<?php 

    header("Content-type: application/vnd.ms-excel; name='excel'"); 
    header("Content-Disposition: filename=export.csv"); 
    header("Pragma: no-cache"); 
    header("Expires: 0"); 

    print $_REQUEST['exportdata']; 

?> 

actualización : Una versión más amigable de IE7:

<?php 

    header('Content-Type: application/force-download'); 
    header('Content-disposition: attachment; filename=filename.csv'); 

    print $_POST['exportdata']; 

?> 
+0

1 trabajó para mí. Sin embargo, terminé usando $ ("body"). Append ([enter-form-here]); – Eddie

+5

Aunque tenga en cuenta que esto requiere un servidor de ida y vuelta de todos los datos. Si tiene muchos datos en el cliente, esto no es óptimo. – desau

+5

Esto es claramente una mala práctica. Si vas a utilizar datos sucios del lado del cliente, al menos deberías evitar involucrar al servidor en eso. Entonces, o bien genere datos desde el servidor y repítalo o simplemente hágalo directamente con js. –

6

No recomiendo "descargar" datos CSV de esta manera. IE7 solo permite hasta 2000 caracteres en la barra de direcciones, por lo que es probable que el archivo se trunque.

7

gracias por su pregunta y respuesta, funcionó bien para mí. Aquí está el (casi idéntico) ASP.Net versión de su solución que estoy usando:

función emergente

Cambio table2CSV.js a:

function popup(data) { 
     $("body").append('<form id="exportform" action="CsvExport.ashx" method="post" target="_blank"><input type="hidden" id="exportdata" name="exportdata" /></form>'); 
     $("#exportdata").val(data); 
     $("#exportform").submit().remove(); 
     return true; 
} 

Observando el cambio de export.php a un .ashx controlador genérico.

El código del controlador genérico:

public void ProcessRequest (HttpContext context) { 
    context.Response.ContentType = "application/force-download"; 
    context.Response.AddHeader("content-disposition", "filename=filename.csv"); 

    context.Response.Write(context.Request.Form["exportdata"]); 
} 
1

No es compatible con todos los navegadores, pero no del lado del servidor necesario! Pruebe el código a continuación using JSFiddle y díganos si se está ejecutando en su navegador.

$('<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(); 
}); 
Cuestiones relacionadas