Cómo descargar de la página actual como un archivo o datos adjuntos con Javascript?

Soy consciente de iFrame oculto truco de como se menciona aquí (http://stackoverflow.com/questions/365777/starting-file-download-with-javascript) y en otras respuestas.

Estoy interesado en un problema similar:

¿Cómo puedo usar Javascript para descargar el actual página (es decir: la actual DOM, o un sub-conjunto de la misma) como un archivo?

Tengo una página web que recopila los resultados de un no determinista de consulta (por ejemplo. una muestra aleatoria) para mostrar al usuario. Ya puedo, a través de un parámetro de cadena de consulta, para hacer la página de retorno de un archivo en lugar de la visualización de la página. Puedo agregar una “versión del archivo” botón (nuestro enfoque estándar), pero los resultados serán diferentes a los mostrados debido a que se trata de una ejecución diferente de la consulta.

Es allí cualquier manera a través de Javascript para descargar la página actual como un archivo, o se copia en el portapapeles mi única opción?

EDITAR
Una opción sugerida por Stefan Kendall y dj_segfault es escribir el resultado del lado de servidor para su posterior recuperación. Buena idea, pero lamentablemente la escritura de archivos en el lado del servidor está fuera de la cuestión en este caso.

¿El estremecimiento pasar el innerHTML como un parámetro post a otra página?

OriginalEl autor xan | 2011-09-01

5 respuestas

  1. 14

    Puedes probar con el protocolo data:text/attachment

    Como en:

    <html>
    <head>
        <style>
        </style>
    </head>
    <body>
        <div id="hello">
            <span>world</span>
        </div>
    <script>
    (function(){
        document.location = 
            'data:text/attachment;,' + //here is the trick
            document.getElementById('hello').innerHTML;
                //document.documentElement.innerHTML; //To Download Entire Html Source
    })();
    </script>
    </body>
    </html>

    Editar después de shesek comentario

    No hay necesidad de un iframe, que puede simplemente document.location= a ella
    Aprendido algo grande hoy. Gracias!
    Truco! De cualquier forma para establecer el nombre de archivo de descarga a través de este?
    incluso más elegante!
    puede ser con un window.open y jugando con el título, pero se obtiene una nueva pestaña

    OriginalEl autor Mic

  2. 5

    Para agregar a Mic excelente respuesta anterior, algunos puntos adicionales:

  3. Si tiene contenido Unicode (O quieren preservar la sangría en la fuente), usted necesita para convertir la cadena en Base64 y decirle a los Datos URI para el tratamiento de los datos tales como:
  4. (function(){
        document.location = 
            'data:text/attachment;base64,' + //Notice the new "base64" bit!
            utf8_to_b64(document.getElementById('hello').innerHTML);
                //utf8_to_b64(document.documentElement.innerHTML); //To Download Entire Html Source
    })();
    
    function utf8_to_b64( str ) {
      return window.btoa(unescape(encodeURIComponent( str )));
    }

    utf_to_b64() a través de MDN — funciona en Chrome/FF.

  5. Puedes colocar todo esto en una etiqueta de anclaje, que permite establecer la descarga atributo:
  6. <a onclick="$(this).attr('href', 'data:text/plain;base64,' + utf8_to_b64($('html').clone().find('#generate').remove().end()[0].outerHTML));" download="index.html" id="generate">Generate static</a>

    Este se descarga de la página actual del HTML como index.html y elimina el enlace utilizado para generar la salida. Esto supone la utf8_to_b64() la función de arriba está definido en algún otro lugar.

    Algunos enlaces útiles sobre los Datos Uri:

    OriginalEl autor aendrew

  7. 1

    Dependiendo del tamaño y si es necesario el apoyo de los antiguos exploradores, pero se puede considerar la creación de un archivo dinámico usando data: Uri y un enlace a ella. Yo’be visto varios lugares que hacerlo. Para obtener el brorwser para descargar en lugar de la pantalla, jugar con el tipo de contenido que usted pone en la URI y utilizar el nuevo html5 descargar atributo. (Lo siento por cualquier errores, estoy escribiendo desde mi teléfono)

    OriginalEl autor shesek

  8. 0

    No creo que usted va a ser capaz de hacer exactamente de la manera que usted desea. JavaScript no se puede crear un archivo y descargarlo por razones de seguridad. Tampoco se puede crear en el servidor para su descarga.

    Lo que yo haría si yo fuera usted, es decir, en el lado del servidor, cree un archivo de salida con el ID de sesión en el nombre en un directorio temporal como crear la salida de la página web, y tiene un botón en la página web, con un enlace a ese archivo.

    Usted probablemente querrá un proceso independiente para eliminar los archivos de más de un día de edad o algo así.

    Esto es lo que me temía. La escritura de lado de servidor de archivos es, por desgracia, fuera de la cuestión.

    OriginalEl autor dj_segfault

  9. 0

    No se puede caché de los resultados de la consulta, y de la tienda que por alguna clave? De esa manera usted puede hacer referencia a la misma salida del informe para siempre, o hasta que su archivo recolector de basura que viene. Esto también significa que usted puede crear estática de direcciones Url para informar de las salidas, que tiende a ser agradable.

    La escritura de lado de servidor de archivos es, por desgracia, fuera de la cuestión.

    OriginalEl autor Stefan Kendall

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *