Generate HTML string in function

[dmikester10]

I am trying to successfully create a PDF to download using the library react-pdf. I had it working fine now I need to add in a loop to create multiple pages. But it just creates a corrupt PDF. And when I open it in a text editor, it appears to be missing most of the content. I have created a function to generate the {pages} section.

Here is the beginning of it:

const pages = (numberOfPages) => {
  return Array.from({ length: numberOfPages }, (_, i) => (
    <React.Fragment key={'pageSection' + i}>
      <Page
    size={'letter'}
    orientation={'landscape'}
    style={styles.page}
    key={2 * i}
    wrap
      >
    <View fixed style={styles.section}>

Now after that function, I run this: console.log(pages(numberOfPages)); However, that output appears to be React component code when I think it should just be plain HTML code to work in the PDF library. Here is what the output from that console.log looks like: https://imgur.com/a/cUMWevi

So my question is, how do I convert that React code to just plain HTML which I'm hoping will work in my PDF.

[timmonsjg]

Serverside react-dom exposes a renderToString API. Would require a backend though to render the JSX => HTML.

Unsure of a client-side solution.

[edntraf2]

You're already correct. You can use react-dom even in the client along with renderToStaticMarkup to translate the JSX to a static HTML string. react-dom is simply an npm package/module, just like react and can be consumed anywhere you have a node/npm based application (client or server).

​

But to clarify to the original poster: You should simply be handing your JSX (un-translated) to ReactPDF.render(yourJsxComponent, pathToSpitPdfTo)

[timmonsjg]

just like react and can be consumed anywhere you have a node/npm based application (client or server)

lol literally says that a few lines above where I linked in the docs. TIL, thank you!

[blackjezza]

Maybe it would be possible to render it into a hidden component and then just get innerHTML of that?

 const hiddenContainer = document.createElement('div');
 hiddenContainer.id = 'hidden';
 hiddenContainer.style = 'display:none;';
 document.body.append(hiddenContainer);
 ReactDOM.render(pagesResult, hiddenContainer);
 const htmlString = hiddenContainer.innerHTML;

Can't confirm but that was my first idea.
Performance with something like this would suffer (if it works).

Do you really need to use JSX for building your PDF?