1
boton.addEventListener("click" , () =>{
  var zip = new JSZip();
  objetivo.forEach(el =>{
    html2canvas(el).then(canvas => {
      var id = el.id;
      var capturas = canvas.toDataURL();
      zip.file( id+".jpg" , capturas.substr(capturas.indexOf(',')+1), {base64: true});
      zip.generateAsync({type:"blob"}).then(function (blob) {
        saveAs(blob, "hello.zip");  
      })
    })
  })
}) 

El saveAs se ejecuta 5 veces porque esta dentro del foreach y no encuentro manera de ponerlo fuera para que se genere un solo archivo zip

2 respuestas 2

2

Ya que html2canvas() es un proceso asincrono, no puedes llamar a zip.generateAsync() despues del foreach. En ese instante ni siquiera se ha generado las capturas aun.

Puedes sin embargo detectar el momento en que todos los elementos el se hayan procesado, y generar el archivo al completarse el ultimo elemento:

boton.addEventListener("click" , () =>{
  var zip = new JSZip();
  var total=objetivo.length;
  var count=0;
  objetivo.forEach(el =>{
    html2canvas(el).then(canvas => {
      var id = el.id;
      var capturas = canvas.toDataURL();
      zip.file( id+".jpg" , capturas.substr(capturas.indexOf(',')+1), {base64: true});
      count++; // cuenta procesados
      if (count==total){ // todos completados
        zip.generateAsync({type:"blob"}).then(function (blob) {
          saveAs(blob, "hello.zip");  
        })
      }
    })
  })
}) 
1
  • @Marcos no esta usando el indice del array para determinar el final (en ese caso si podria resolverse antes), el contador esta dentro de la resolución y solo alcanzara el valor total cuando el ultimo se resuelva independiente de cual elemento del array fuera
    – F.Igor
    Commented el 19 ago. 2020 a las 16:52
1

Podrías crear una Promise por cada objetivo a procesar, guardar la promesa dentro de un arreglo y luego esperar a que todas se hayan resuelto para generar el archivo.

Ejemplo:

boton.addEventListener("click" , () =>{
  var zip = new JSZip();
  let promises = [];

  objetivo.forEach(el =>{
    // Creamos una promesa
    let p = new Promise((resolve, reject) => {
      html2canvas(el).then(canvas => {
        var id = el.id;
        var capturas = canvas.toDataURL();
        zip.file( id+".jpg" , capturas.substr(capturas.indexOf(',')+1), {base64: true});
        resolve(id);
      })
    })
    // Guardamos la promesa
    promises.push(p)
  })

  // Solo cuando todas las promesas se hayan resuelto satisfactoriamente
  Promise.all(promises).then(values => {
      zip.generateAsync({type:"blob"}).then(function (blob) {
        saveAs(blob, "hello.zip");
      })
  })
})

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.