html2pdf.js
html2pdf.js copied to clipboard
Progress Tracking
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
})
});
i'm trying to do the same
Has anyone created a solution for progress tracking?
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
});
`
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)
})
...
@nader2929 your solution is perfect for my use case where I need to show and hide a spinner. Thanks !
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' },
});
};
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;
}
);
}