Integrating Paged.JS into React/JS website

Question

I'm attempting to display my html page with paged.js in a react project. The html loads fabulously from local host (not via npm start, but the live server ext on vscode), but when I tried to follow the steps on this website it just all messed up and not formatted in the paged.js way.

Also I'm using MUI library and I'm attempting to load it in a box (EDIT- MUI or not, the paged.js does not load with the proper format):

<Box sx={{ display: 'flex', flexDirection: 'row'}}>
   <Paper elevation={3}>
      <Box sx={{m:3}}>
         <Form/>
      </Box>
   </Paper>
   <Paper elevation={3}
      <Box sx={{m:3}}>
         <Report ...props/> //this is where I load my report
      </Box>
   </Paper>
</Box>

and my report function looks something like this:

function Report(props) {
     useEffect(() => {
        const paged = new Previewer();
        const DOMContent = document.querySelector('paged');
      
        paged.preview(DOMContent, ['/pagedjs.css'], document.body).then((flow) => {
          console.log('Rendered', flow.total, 'pages.');
        });
      }, []);
   
     return (
         <div className='paged'>
           whole bunch of report stuff
         </div>
     )
}

The form takes inputs that updates values in the report, so I'd like to see them side by side, but I don't really care so much about that and will take any solution that gets paged.js to work in react at all.

If anyone has any idea it'll be greatly appreciated. I've tried everything I could find on the internet already and nothing helped xD

I've also tried: jsPDF, react-pdf, and react-print, but the report is decently complex and has a lot of elements that so far I've only been able to achieve with paged.js

Answer 1

while working with pagedjs and material-ui, formatting was not loaded because css file was not loaded. for this to work I moved my css file (in your case pagedjs.css) into public folder and it worked for me. NOTE: you can see if your css is loaded from 'Network' tab in browser dev-tool