La línea en negrita de arriba es la que no funciona y estoy tratando de resolverlo. Aquí está el HTML y javascript relevantes para esa pieza:
<button type="button" class="btn btn-primary" id="transform"> <span class="glyphicon glyphicon-wrench"></span> Transform Uploaded Files </button> <a id="test_dl" href="" download="user_download.zip"> Download File </a> $('#transform').click(function (e) { $.getJSON('/transform', {}, function (final_zip){ var zipfile = "file://" + final_zip.zip_filename $('a#test_dl').attr("href", zipfile) }); });El usuario hace clic en el botón "Transformar archivos cargados", que luego actualiza el href a la ubicación del archivo zip resultante y luego puede descargar el paquete resultante haciendo clic en el HTML "Descargar archivo".
He probado esto en Chrome hasta ahora y usando la consola del desarrollador puedo ver que el href se está actualizando correctamente antes de hacer clic en el botón de descarga, pero siempre aparece el cuadro de diálogo "Error de red". Lo extraño es que cuando hago clic en "Mostrar todas las descargas" y luego hago clic en la descarga fallida, se completa con éxito.
Editar: debo agregar que el backend para esto se está ejecutando actualmente en Python's Flask
Aparentemente, este es un problema de Chrome con la URL de datos demasiado larga. Todavía estoy trabajando en ello, pero aparentemente hay algunas soluciones que involucran objetos Blob.
Ver aquí: Descargar Canvas como PNG en fabric.js dando error de red
Y aquí: ¿Cómo exportar información de matriz de JavaScript a csv (en el lado del cliente)?
Basado en ¿Cómo exportar información de matriz de JavaScript a csv (en el lado del cliente)? así es como he implementado una solución para este problema:
Tenga en cuenta que solo necesitaba una solución para Chrome - web, así que esto es lo que usé. Para obtener una solución completa, deberá consultar los ejemplos en la respuesta original
$.ajax({ url: "/getData", dataType: "text", success: function(data){ $("#download").attr({ "value": "Download", "href": URL.createObjectURL(new Blob([data], { type: "application/octet-stream" })), "download": "outputFile.csv" }); } });