how to add spinner for jspdf + html2canvas

Asked May 09 '18 at 14:40

Active May 09 '18 at 14:44

Viewed 882 times

I am trying to use jspdf and html2canvas for my project. It works great but if the page is large in size, it takes time to process after clicking the button to download the pdf. I would like to add a spinner as soon as the user clicks on the render PDF button. Though I have set the state for the loading property to true in react, the value is not rendered/displayed but it is displayed right before the pdf is downloaded.

Any thoughts ?

Code

printDocument() {
    const input = document.getElementById('container');
    this.setState({
        isDownloading: true
    });
    html2canvas(input)
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new pdfConverter("p", "mm", "a4");
                    var width = pdf.internal.pageSize.width;    
                    var height = pdf.internal.pageSize.height;
                    pdf.addImage(imgData, 'JPEG', 0, 0,width,height);
                    pdf.save("download.pdf");
         this.setState({
            isDownloading: false
        })

      })
    ;
  }

edited May 09 '18 at 14:44

asked May 09 '18 at 14:40

Johnson Samuel

2,046
2
18
29

please show us your code or we won't be able to help. – Sulthan May 09 '18 at 14:44
@sulthan I have edited my actual question. – Johnson Samuel May 09 '18 at 14:48
You should give some time to the browser to update the layout, try to start the PDF generation by using a timeout. Anyway, during PDF generation, a GIF spinner will freeze. – deblocker May 23 '18 at 06:56
@deblocker: I added setTimeout for the html2canvas method and this helped me solved the issue :) – Johnson Samuel May 23 '18 at 06:58
@JohnSamuel How u add ? I tried but the loading indicator did not show – Minh Kha Sep 07 '20 at 07:49
@MinhKha what is the error you got? – Johnson Samuel Nov 02 '20 at 14:22

how to add spinner for jspdf + html2canvas

0 Answers0