Hi, y'all this is probably the simplest way to go when you're trying to add a download page functionality in react.
In this article, I'll be showing you how to implement pdf downloads from your react project using either class or functional components.
Installations
I assume you have your react project installed.
Now go ahead and add the packages
yarn add react-to-print
or
npm i react-to-print
Using functional components
Now we can go to our App.js component or any file you intend to use and import your package like so.
import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';
const App = () => {
const componentRef = useRef();
return (
<div>
<div ref={componentRef}>This contains all the files you intend to export[download]</div>
<ReactToPrint
trigger={() => <button>Print this out!</button>}
content={() => componentRef.current}
/>
</div>
);
};
export default App;
Voila! However, you might want to be passing the component from another file, then you'll have to pass the ref
as a prop.
Using class component
Following the same method as the first approach, go to your desired file and follow the technique below.
import React from "react";
import ReactToPrint from "react-to-print";
class App extends React.Component {
render() {
return (
<div>
<div ref={(refer) => (this.componentRef = refer)}>Export my HTMl component to a PDF File</div>
<ReactToPrint
content={() => this.componentRef}
trigger={() => (
<button className="btn btn-primary">Print to PDF!</button>
)}
/>
</div>
);
}
}
export default Appp;
Note when using an external file you'll just have to pass the ref directly into the component you're calling like so <ImportedComponent ref={(response) => (this.componentRef = response)} />
and yeah you're all good to go.
You're welcome.