HTML to PDF convert in react js using jsPDF not working

Question

after executing the below function getting error In function, simple HTML div tags are inserted but still not working

exportPDF function will call when one button will click to generate pdf

Function

const exportPDF = () => {
   let element=(<div style={{display: "flex",flexWrap:"wrap"}}>Sample Text</div>)
   const doc = new jsPDF();
   doc.html(element, {
       callback: function (doc) {
            doc.save('sample.pdf');
         }
     });
}

Error

jspdf.es.min.js:128 Uncaught (in promise) Error: Unknown source type.
    at Promise.<anonymous> (jspdf.es.min.js:128:1)

I'm using npm package of jsPDF ("jspdf": "^2.4.0")

Unable to figure out why doc.html not working in this code

Answer 1

If you are using reactjs just convert your element to html and then pass it to the jspdf like below

import jsPDF from "jspdf";
import ReactDOMServer from "react-dom/server";

export default function App() {
  const exportPDF = () => {
    let element = (
      <div style={{ display: "flex", flexWrap: "wrap" }}>Sample Text</div>
    );
    const doc = new jsPDF("p", "pt", "letter");
    doc.html(ReactDOMServer.renderToString(element), {
      callback: function (doc) {
        doc.save('sample.pdf');
      }
    });
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={exportPDF}>export</button>
    </div>
  );
}