Search code examples
html2canvas

Extra white space on the left and lost part on the right with html2canvas


The width of extra and lost parts seems always 8px when I tried to download the image via html2canvas.

html2canvas(elementRef.nativeElement).then((canvas) => {
      let link = document.createElement("a");
      link.href = canvas.toDataURL("image/png");
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
    });

sample image


Solution

  • I solved all possible problems as follows..

    html2canvas(element , {
            scrollX: -window.scrollX,
            scrollY: -window.scrollY,
            windowWidth: document.documentElement.offsetWidth,
            windowHeight: document.documentElement.offsetHeight
    })