Unable to render react components into PDF

[steric85]

Thank you for submitting an issue to jsPDF. Please read carefully.

Are you using the latest version of jsPDF?
Yes

Have you tried using jspdf.debug.js?
No

What I saw
jsPDF does not render the react components into pdf. Is this functionality not provided or am I making any mistake in writing the code?

     <div>
        <div id="HTMLtoPDF">
            <HelloWorld name="Rambo"/>
            <HelloWorld name="Riya"/>
            <HelloWorld name="Rose"/>
            <h2>Is it converted?!</h2>
          <center>
            <h2>HTML to PDF</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing </p>
          </center>
          <button>Hi, Click me</button>
          <img src={puppy} />
        </div>
        <button onClick={this.pdfToHTML}>Download PDF</button>
      </div>

When the above code is written in render() , all the components and tags are displayed in the browser. But when download the pdf, neither the buttons nor react components are getting converted.

[Uzlopak]

Too abstract. Please provide a test case on jsfiddle or jsbin. Thanks.

[steric85]

For the above code, the webpage I get is:

But when I download PDF , I get the following output:
html2pdf (7).pdf

By looking at the two, you can know that the button and react components HelloWorld are not present in the PDF.

[Uzlopak]

I never worked with react so i dont know the deeper functionality behind it. But probably it doesnt work, because you use unsupported custom html-tags. You have to write your own renderer for your custom tags.

[steric85]

Oh, Ohkay. Thanks!

[vaclav-zeman]

@steric85 I've just came across this issue as well and it's actually possible to just use ReactDOMServer (imported from 'react-dom/server') and its function renderToStaticMarkup(component) to render html that jsPDF will accept.

[iqbalsafian]

@steric85, can you show me an example with react? i did use renderToStaticMarkup but it only printed the

and etc ...

jspdf.text(ReactDOMServer.renderToStaticMarkup(<ResumeContent />), 10, 10, {'width': 180})

[mmn6d6d6e]

@iqbalsafian, you use .fromHTML() instead of .text()

jspdf.fromHTML(ReactDOMServer.renderToStaticMarkup(<ResumeContent />), 10, 10, {'width': 180})

[huberemanuel]

I've tried and the result lost all the styles in the components. This is the normal behaviour?

[Uzlopak]

If you mean, that you had CSS3 and used fromHTML, then yes.