Contribuye
Descarga de archivos Descargar archivos usando XMLHttpRequest2 (XHR2) con Grails

Motivación

Mostrar como descargar una archivo con Grails usando XHR2 y una implementación del saveAs() FileSaver.js de HTML5. Noten toda la flexibilidad que se tiene usando XHR2, desde monitorear el progreso de descarga hasta cancelarla.


Antes de continuar

Conviene mucho que leas Recuperación de archivos - Nuevos trucos para XMLHttpRequest2, que ya no es tan nuevo pero si muy útil. Por favor lee las ligas que comento ya que espero que el código lo puedas copiar, pegar y jugar.

Descarga la ultima versión estable de FileSaver.js.


Controlador

package app

class IndexController {

    def index() {}

    def descarga() {
        def zipFile = new File('/tmp/file.zip')
        header("X-File-Name", zipFile.name)
        response.contentType = 'application/octet-stream'
        zipFile.withInputStream { response.outputStream << it }
        //zipFile.delete()
    }
}

Vista

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
</head>

<body>
  <button>Descagar</button>
</body>

<script src="${resource(dir: 'js', file: 'FileSaver.js')}"></script>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
        var descarga_url = "${createLink(controller: 'Index', action: 'descarga')}";
        var xhr = new XMLHttpRequest();
        xhr.open('GET', descarga_url, true);
        xhr.responseType = 'blob';
        xhr.onload = function (e) {
            if (this.status == 200) {
                var blob = this.response;
                var file_name = xhr.getResponseHeader('X-File-Name');
                var file_saver = new saveAs(blob, file_name);
                console.log(file_saver);
            }
        };
        xhr.send();
    });
</script>
</html>

comments powered by Disqus