"descarga" de datos del lado del cliente de JS (sin un nuevo servidor de ida y vuelta)

Tengo un montón de datos en el lado del cliente, en JS. Quiero permitir que el usuario guarde esos datos en el disco duro local en formato de texto (CSV en realidad)."descarga" de datos del lado del cliente de JS (sin un nuevo servidor de ida y vuelta)

Puedo lograrlo fácilmente publicando todos estos datos en el servidor usando ajax, luego inicie un GET desde el cliente para descargar los datos. Pero eso parece un desperdicio. Especialmente si los datos son grandes.

El cliente ya tiene los datos, sin duda podría mostrárselos y permitirles copiarlos/pegarlos en su editor de texto favorito, pero esa no es una interfaz de usuario muy buena.

Quiero permitirles guardar los datos en un archivo local. Entiendo las implicaciones de seguridad aquí.

Creo que esto es posible usando dataurl, pero (gracias MS), esto tiene que funcionar en IE7 y 8 ... así que está fuera.

¿Alguna idea original?

Fuente

2010-10-26 desau

Aquí hay una pregunta relacionada (http://stackoverflow.com/questions/921037/jquery-table-to-csv-export). Están haciendo un viaje de ida y vuelta al servidor que, me doy cuenta, no es ideal, pero funcionaría con seguridad. – dana

no va a funcionar para esta configuración específica, pero es algo por el estilo ..

http://decafbad.com/2009/07/drag-and-drop/api-demos.html#data_transfer

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <title>Drag and Drop --> Text File</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <meta http-equiv="Content-Language" content="en-us" /> 
    <script type="text/javascript" src="jquery.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      // Set up the draggable element. 
      $('#data_transfer').bind('dragstart', function(ev) { 
       if (!$(ev.target).hasClass('dragme')) return true; 
       var dt = ev.originalEvent.dataTransfer; 
       dt.setData('text/plain', $('#source').text()); 
       return true; 
      }); 
     }); 
    </script> 

    <style type="text/css"> 
     .dragme { 
      border: 1px solid #000; 
      background-color: #decafb; 
      padding: 10px; 
     } 
    </style> 
</head> 

<body> 
    <div id="data_transfer"> 
     <textarea id="source">Blah! I'm a textarea!</textarea> 
     <p><span class="dragme" draggable="true">Drag Me to your Desktop!</span></p> 
    </div> 
</body> 
</html>

Fuente

2010-10-26 19:20:22 drudge

Esto es interesante, aunque hay varios problemas: 1) No funciona en IE. 2) No me permitirá configurar el nombre del archivo de salida; en Mac, simplemente lo llama un archivo "textClipping". 3) También necesito que esto no esté en un evento de arrastrar/soltar, que requeriría un cuadro de diálogo de guardar archivo para seleccionar la ubicación de guardado. – desau

Downloadify hace esto. Requiere Flash.

Downloadify es una pequeña biblioteca JavaScript + Flash que permite generar y guardar archivos sobre la marcha, en el navegador, sin interacción del servidor.

Fuente

2010-10-26 19:21:11

Esto es ciertamente posible con cualquier número de extensiones ... Flash, Active-X, Silverlight, Applet de Java, etc., etc. Necesito esto para no requerir ningún complemento adicional. – desau

@desau No creo que esto se pueda hacer sin plugins adicionales, de lo contrario no necesitaría Downloadify ... –

"descarga" de datos del lado del cliente de JS (sin un nuevo servidor de ida y vuelta)

Respuesta

Cuestiones relacionadas