Progress Tracking

[goalguy10]

I am trying to add a progress bar to the UI to display during PDF creation. I see a mention of progress tracking in the Readme but how can I access this through out the process?

I am using the promise based approach

html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) {
        var totalPages = pdf.internal.getNumberOfPages();

        console.log("Total Pages: ", totalPages);

        for (var i = 1; i <= totalPages; i++) {
            console.log('LOOP');
            pdf.setPage(i);
            pdf.setFontSize(10);
            pdf.setTextColor(150);
            pdf.text('Page ' + i + ' of ' + totalPages, pdf.internal.pageSize.getWidth() - 10.85, pdf.internal.pageSize.getHeight() - .15);
            pdf.text('Generated From Website', pdf.internal.pageSize.getWidth() - 6.5, pdf.internal.pageSize.getHeight() - .15)
        }
    }).output('blob').then(function (blob) {
        //upload
    })
});

[javadamjavad]

i'm trying to do the same

[kempsteven]

Has anyone created a solution for progress tracking?

[nader2929]

Realise that this is an old question now but I figured it out in one of my projects

Change this

html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) { to this

`

    html2pdf().from(element).set(opt).toContainer().toCanvas().toImg().toPdf().save().then(
    function (pdf) {
    
         //Success here
         
     }, 
     function(){
     
         //Error Here
         
     });

`

[coderfin]

Looking at the code the progress tracking definitely seems to be a work-in-progress. I wasn't able to yield any helpful results.

It appears that you need to use this.progress in one of the Worker API methods.

In my testing I didn't see this.progress change significantly.

Here is what I used to test it:

new html2pdf.Worker()
      .then(function() {
        let numIterations = 40
        const interval = setInterval(() => {
          if (numIterations <= 0) {
            clearInterval(interval)
            return
          }
          numIterations -= 1
          console.log(this.progress)
        }, 100)
      })
...

[w455im]

@nader2929 your solution is perfect for my use case where I need to show and hide a spinner. Thanks !

[sherzodqodirov]

 const pdfContainerRef = useRef(null);
    const [loading, setLoading] = useState(false);
    const [progress, setProgress] = useState(0);
    const simulatePDFGeneration = async () => {
        const stages = [
            { percentage: 25, message: 'Preparing...' },
            { percentage: 50, message: 'Generating PDF...' },
            { percentage: 75, message: 'Finalizing...' },
            { percentage: 100, message: 'Complete!' },
        ];

        for (const stage of stages) {
            setProgress(stage.percentage);
            await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate delay
        }

        setProgress(0); // Reset progress
        setLoading(false);
    };
    const downloadPDF = async () => {
        setLoading(true);
        await simulatePDFGeneration();

        const content = pdfContainerRef.current;
        html2pdf(content, {
            margin: 10,
            filename: 'downloaded-file.pdf',
            image: { type: 'jpeg', quality: 1 },
            html2canvas: { scale: 2 },
            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
        });
    };

[luckyranger]

Hi, I made this to use a loading screen instead of a progress bar: This also worked in vue.js

var done= false;   // Progress Flag

//function is made async else the external variable 'done' is not accessible inside child functions under "then" part.

//pdfProperties
var printProps = {   
                                image:{ 
                                    type: 'png', 
                                    quality: 1 
                                },
                                html2canvas:  { 
                                    scale: 3,
                                    dpi:300
                                }
                          };
async function PDFprint(){
            await window.html2pdf().
                        set(printProps). 
                        from(document.querySelector("#cdModal0")).
                        save(`MyPdf-${new Date().toLocaleDateString()}.pdf`).
                        then(
                            ()=>{
                                console.log("PDf Printed: success")
                                done=true;
                            }
                        );
        }