How to download axios response from database in react as a pdf file?

Question

I have view.js file where I display every customer details by their id. I have nodejs backend with MYSQL database. I want to download those details as a pdf file with download button.

PS: I'm new to reactjs and nodejs.

below is my view.js code

import React, {useState, useEffect} from 'react';
import { useParams, Link } from 'react-router-dom';
import axios from 'axios';
import Moment from 'moment';
import './View.css';

const View = () => {

    const [user, setUser]=useState({});

    const {id}=useParams();

    useEffect(()=>{

        axios.get(`http://localhost:5000/api/get/${id}`)
        .then((res)=> setUser({...res.data[0]}));

    },[id]);

  return (
    <div style={{marginTop: "150px"}}>
        <div className='card'>
            <div className='card-header'><p>Customer Details</p></div>
            <div className='container'>
                <strong>ID: </strong>
                <span>{id}</span>
                <br/>
                <br/>
                <strong>Name: </strong>
                <span>{user.name}</span>
                <br/>
                <br/>
                <strong>Date of Birth: </strong>
                <span>{Moment(user.dob).format('DD-MM-YYYY')}</span>
                <br/>
                <br/>
                <strong>Adhaar Nuumber: </strong>
                <span>{user.adhaar}</span>
                <br/>
                <br/>
                <strong>Pan: </strong>
                <span>{user.pan}</span>
                <br/>
                <br/>
                <Link to="/">
                    <div className='btn btn-edit'>Go Back</div>
                </Link>
            </div>
        </div>
    </div>
  )
}

export default View

Answer 1

Maybe one of these html to pdf packages from npm can help you:

https://www.npmjs.com/package/html-pdf?activeTab=readme https://www.npmjs.com/package/html-pdf-node