habilitar - Múltiples enlaces de descarga a un archivo zip antes de descargar javascript
instalar javascript (2)
Puede usar
JSZip.js
,
XMLHttpRequest()
,
Array.prototype.map()
,
Promise.all()
para crear un archivo
.zip
cuando se hayan completado todas las solicitudes de archivos;
use el elemento
<a>
con el atributo de
download
establecido en
objectURL
del archivo
.zip
en la función
JSZip
.generateAsync()
, haga clic en
a
elemento para mostrar el cuadro de diálogo
Save File
con el
Save File
.zip
creado como archivo descargable.
<head>
<script src="jszip.js"></script>
<script>
window.onload = function() {
var zip = new JSZip();
var a = document.querySelector("a");
var urls = ["a.html", "b.html"];
function request(url) {
return new Promise(function(resolve) {
var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", url);
httpRequest.onload = function() {
zip.file(url, this.responseText);
resolve()
}
httpRequest.send()
})
}
Promise.all(urls.map(function(url) {
return request(url)
}))
.then(function() {
console.log(zip);
zip.generateAsync({
type: "blob"
})
.then(function(content) {
a.download = "folder" + new Date().getTime();
a.href = URL.createObjectURL(content);
a.innerHTML = "download " + a.download;
});
})
}
</script>
</head>
<body>
<a href="" download>download</a>
</body>
¿Es posible, en JavaScript, tener múltiples URL de descarga enviadas en un archivo zip y ese archivo zip se puede descargar. Entonces, más o menos, en mi página web, hay un botón que, al hacer clic, descarga un archivo zip de todos los archivos de las URL de descarga comprimidos en el zip.
Creo que necesitaría usar jszip o alguna herramienta como esa. ¿Es esto posible y hay algún consejo sobre por dónde empezar?
Recientemente tuve que resolver el mismo problema y encontré una solución usando JSZipUtils .
La solución se puede encontrar aquí http://plnkr.co/edit/vWARo0dXbkgzmjyoRNi0?p=preview
Tengo dos archivos que me gustaría comprimir y descargar a través del navegador de los usuarios y llamo a la función
getBinaryContent(path, callback)
en ambos archivos.
La ruta aquí es donde se almacena el archivo.
Los dos archivos son un archivo .wav y un archivo .json.
Cada uno de ellos debe tratarse de manera diferente y, por lo tanto, debe usar
{base64:true,binary:true}
para el archivo .wav y
{binary:true}
para el archivo json como argumento para el archivo de función de
JSZip
.
El código también se puede encontrar aquí
var file_confirmation=[false,false];
var file_name=["test1.wav","test.json"];
var urlList =["test.wav","test.json"];
var filenameSave ="myZip";
function zipFiles(id,urls)
{
zip = new JSZip();
JSZipUtils.getBinaryContent(urls[0],function (err, data)
{
if(!err)
{
var dic={base64:true,binary:true}; //WAV File Encoding
zip.file(file_name[0], data, dic);
file_confirmation[0]=true;
downloadZipIfAllReady(id);
}
});
JSZipUtils.getBinaryContent(urls[1],function (err, data)
{
if(!err)
{
var dic={binary:true}; //JSON File Encoding
zip.file(file_name[1], data, dic);
file_confirmation[1]=true;
downloadZipIfAllReady(id);
}
});
}
function downloadZipIfAllReady(id)
{
if(file_confirmation.every(function(element, index, array) {return element;}))
{
zip.generateAsync({type:"blob"})
.then(function(content)
{
var a = document.querySelector("#"+id);
a.download = filenameSave;
a.href = URL.createObjectURL(content);
a.click();
});
}
}
$(document).ready(function()
{
zipFiles("a_id",urlList);
})