diegomura / diegomura/react-pdf
Support progress reporting
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
It takes a long time to render large PDF documents.
Ideally I would like to see a progress callback that indicates what is currently being processed, and/or a value, such as node x of n. Even better, add a way to cancel long running processes. Perhaps a task could be ran ahead of time to count all nodes in the documents hierarchy and execute a callback or promise as each node is processed.
One of the main problems I'm running into is that the main thread is blocked, and I can't interact with anything on the page until it has completed.
```javascript
import React, { useState, Fragment } from 'react';
import { pdf } from '@react-pdf/renderer';
import { saveAs } from 'file-saver';
import { Button, ProgressBar } from 'my-own-package';
const MyPdfProgress = ({ doc, fileName}) => {
const [progress, setProgress] = useState(0);
const [cancel, setCancel] = useState(false);
const cancelPdf = () => {
setCancel(true)
}
const handleProgress = (value, max, entity) => {
// update progress bar dialog
setProgress(value/max);
// continue (return falsy)
// cancel (return truthy)
return cancel;
}
const generatePdf = () => {
setCancel(false);
const blob = await pdf(doc, { progress: handleProgress }).toBlob();
saveAs(blob, fileName);
}
return (
)
}
export default MyPdfProgress;
```
I've tried promises and window setTimeout/setInterval to work around the thread being blocked. I was able to use setTimeout to give react enough time to update the DOM indicating that the PDF generation is about to kick off. My next attempt is looking into worker processes, but not every browser supports it.
This feature would allow me to notify the user of how long it may take to process the document.
Contributor guide
Assessment
This issue has not been assessed yet.