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
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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