diegomura / diegomura/react-pdf

Support progress reporting

Open
#895 4 comments 6 reactions 0 assignees View on GitHub
new feature
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.