### A simple demonstration to convert JSX to PDF in react with the help of `Html2pdf.js` library.

Create React Project and install packages ``` npx create-react-app jsx-to-pdf-example cd jsx-to-pdf-example npm install html2pdf.js ``` `App.js` ```javascript import html2pdf from 'html2pdf.js/dist/html2pdf.min'; import './App.css'; function App() { const pdfJSX = () => { return ( <>

JSX to PDF Convert Example

Hello React

) } const printHandler = () => { const printElement = pdfJSX(); console.log(printElement); html2pdf().from(printElement).save(); } return (

); } export default App; ``` After clicking on `print` button here, you will notice that nothing is happening. Here is what console log would show you in dev tools of the browser. ![DevTools output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfb9jkdopum83fv2wkn2.png) So basically `html2pdf.js` package is expecting simple HTML and nothing is happening. Lets convert JSX to HTML first using `ReactDOMServer` and then pass that to html2pdf function. `App.js` ```javascript import ReactDOMServer from 'react-dom/server'; import html2pdf from 'html2pdf.js/dist/html2pdf.min'; import './App.css'; function App() { const pdfJSX = () => { return ( <>

JSX to PDF Convert Example

Hello React

) } const printHandler = () => { const printElement = ReactDOMServer.renderToString(pdfJSX()); // const printElement = pdfJSX(); html2pdf().from(printElement).save(); } return (

); } export default App; ``` Final Demo ![demo](https://media.giphy.com/media/jxUFGFkFFGik0L1rA1/giphy.gif) **
Bonus (Fix Warnings)** If you notice that there are some warnings on the terminal regarding the package and to fix them, I only found this solution. - Create `.env.development` file inside root directory (_outside /src_) - Add this line to the file: `GENERATE_SOURCEMAP=false` and warnings would be gone.
Library Reference: [https://www.npmjs.com/package/html2pdf.js/v/0.9.0](https://www.npmjs.com/package/html2pdf.js/v/0.9.0) Peace ✌️

reacttopdf

Converting JSX to downloadable pdf in react

Join Our Newsletter. No Spam, Only the good stuff.