reactjs - Create PDF file from HTML text React

Question

I am beginner in react-redux.

I trying create a function like exporting a html text to pdf with Javascript and it works with html, but when I apply it to react component, it doesn't work.

This is my code:

import React from 'react';

class App extends React.Component {
  constructor(props){
    super(props);
    this.pdfToHTML=this.pdfToHTML.bind(this);
  }

  pdfToHTML(){
    var pdf = new jsPDF('p', 'pt', 'letter');
    var source = $('#HTMLtoPDF')[0];
    var specialElementHandlers = {
      '#bypassme': function(element, renderer) {
        return true
      }
    };

    var margins = {
      top: 50,
      left: 60,
      width: 545
    };

    pdf.fromHTML (
      source // HTML string or DOM elem ref.
      , margins.left // x coord
      , margins.top // y coord
      , {
          'width': margins.width // max width of content on PDF
          , 'elementHandlers': specialElementHandlers
        },
      function (dispose) {
        // dispose: object with X, Y of the last line add to the PDF
        // this allow the insertion of new lines after html
        pdf.save('html2pdf.pdf');
      }
    )
  }

  render() {
    return (
      <div>
        <div classID="HTMLtoPDF">
          <center>
            <h2>HTML to PDF</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing </p>
          </center>
        </div>
        <button onClick={this.pdfToHTML}>Download PDF</button>
      </div>
    );
  } 
}

export default App;

Javascript with HTML: https://www.youtube.com/watch?v=HVuHr-Q7HEs

Answer 1

React don't have "classID" property in html tags, it's passed to div as props, which will never be resolved. className was only implemented because it's reserved word in JS, perhabs you need to replace your "classID" by only "id" property and it will work

P.s. JQuery is bad practice when all what you need is DOM manipulation. javascript have document.getElementById() and dependency is not needed

P.p.s. small tip for you is "pdfToHTML(){}" can be replaced to lambda as "pdfToHTML = () => {}", and your function will have "this" from class instance, binding will be removed and constructor will become useless.