html2canvas not working in mobile and Ipad

[anilskalyane]

This library works great in Laptop and Desktop but unable to render content on canvas in small screen devices.

Any Ideas? fix? patch?
Any help would be greatly appreciated.

--Anil

[hakimio]

By "mobile" do you mean iphone? RC1 release works well for me on Android.

[anilskalyane]

Same issues are there in both devices - Android and IOS.

[hakimio]

You need to provide more details to get any help. Did you try RC1 release?

[anilskalyane]

It's perfectly working in windows with chrome browser but same is not working (CSS issues - attached the file) on Mac/Linux/mobile with chrome.

MYPdf.pdf

Here is the code,

download() {
let data = document.getElementById('contentToConvert');

html2canvas(data, {
  allowTaint: false,
  removeContainer: true,
  backgroundColor: '#ffffff',
  scale: window.devicePixelRatio,
  useCORS: false
}).then(canvas => {
  const contentDataURL = canvas.toDataURL('image/png')
  const imgWidth = 210;
  const pageHeight = 295;
  const imgHeight = canvas.height * imgWidth / canvas.width;
  let heightLeft = imgHeight;
  let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
  let position = 5;

  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    pdf.addPage();
    pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
    heightLeft -= pageHeight;
  }
  pdf.save('MYPdf.pdf'); // Generated PDF
});

}

[anilskalyane]

Finally, I got the solution. Here is my updated code,

download() {
    if(screen.width < 1024) {
        document.getElementById("viewport").setAttribute("content", "width=1200px");
    }
    const data = document.getElementById('contentToConvert');
    let html2canvasOptions = {
      allowTaint: true,
      removeContainer: true,
      backgroundColor: null,
      imageTimeout: 15000,
      logging: true,
      scale: 2,
      useCORS: true
    };
      // Few necessary setting options
      const contentDataURL = canvas.toDataURL('image/png')
      const imgWidth = 210;
      const pageHeight = 295;
      const imgHeight = canvas.height * imgWidth / canvas.width;
      let heightLeft = imgHeight;
      let pdf = new jspdf('p', 'mm', 'a4', true); // A4 size page of PDF
      let position = 0;

      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight, undefined,'FAST');
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        pdf.addPage();
        pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight, undefined,'FAST')
        heightLeft -= pageHeight;
      }
      pdf.save('resume.pdf'); // Generated PDF

      if(screen.width < 1024) {
        document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1");
      }
    });
  }

[estebanvr10]

Estimados les comento que yo también tuve problemas cuando hacía capture por debajo a dos div con la siguiente información:

• En el primer div tenía una gráfica de google charts.
• En el segundo div tenía un mapa que creaba con la api leaflet.

Los resultados que tenía eran los siguientes:
1er escenario: Cuando lo hacía desde la laptop todas las capturas se hacían sin problemas.
2do escenario: cuando lo hacía desde dispositivo android sólo podía capturar completo el segundo div, el primer div solo me guardaba el fondo. Con ios capturaba todo pero el primer div salía pixeleado y sobreescrito.

Solución: después de dos días investigando opte por cambiar los js, modifique y di formato a ambos div y cambie el javascript para que posicionara y le diera ancho y alto a la imagen antes de hacer el capture y quedó bien.

Si necesitan ayuda les puedo dar la mano, eso si no tengo mucha experiencia, pero soy muy aplicado...

[RK-rocks]

Finally, I got the solution. Here is my updated code,

download() {
    if(screen.width < 1024) {
        document.getElementById("viewport").setAttribute("content", "width=1200px");
    }
    const data = document.getElementById('contentToConvert');
    let html2canvasOptions = {
      allowTaint: true,
      removeContainer: true,
      backgroundColor: null,
      imageTimeout: 15000,
      logging: true,
      scale: 2,
      useCORS: true
    };
      // Few necessary setting options
      const contentDataURL = canvas.toDataURL('image/png')
      const imgWidth = 210;
      const pageHeight = 295;
      const imgHeight = canvas.height * imgWidth / canvas.width;
      let heightLeft = imgHeight;
      let pdf = new jspdf('p', 'mm', 'a4', true); // A4 size page of PDF
      let position = 0;

      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight, undefined,'FAST');
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        pdf.addPage();
        pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight, undefined,'FAST')
        heightLeft -= pageHeight;
      }
      pdf.save('resume.pdf'); // Generated PDF

      if(screen.width < 1024) {
        document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1");
      }
    });
  }

Hello @anilskalyane your code is working but its cutting content when page is devided