React JS: How do I create a downloadable link with PDF documents to download?

Question

I am building a small website example project using HTML, CSS and JS. I have a button that after click should download PDF example data (for now it is not necessary where to save the documents).

The problem: How to I download PDF documents using an HTML button?

I am using reactstrap Card for each component I would like to download the data. This is an example only, and the real website will contain for each card a button with specific downloadable information.

Below SideBar.js:

import React from 'react';
import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle } from 'reactstrap';
import '../components/SideBar.css';
import { Link } from 'react-router-dom';

class DownloadLink {
    render() {
        return (
            <form method="get" action={this.props.src}>
                <button type="submit">{this.props.children}</button>
            </form>
        );
    }
}

class MyButton {
    render() {
        return <DownloadLink src="/home/emanuele/Desktop/Projects/example1.pdf">Download Project Specs</DownloadLink>;
    }
}

const Sidebar = () => (
    <div className="map-sidebar">
        <Card className="mb-2">
            <CardImg />
            <CardBody>
                <div className="row">
                    <img className="image-sizing-primary" src={image_1} alt="Atchafalaya" />
                </div>
                <CardTitle>
                    <h3>Atchafalaya</h3>
                </CardTitle>
                <CardSubtitle>Trailing Suction Hopper Dredge</CardSubtitle>
                <CardText>
                    <br />
                    <h6>Project Details</h6>
                </CardText>
                <div className="row">
                    <div class="btn-toolbar">
                        <MyButton />
                        <Link to="/vessels/Atchafalaya" className="btn-primary">
                            Go to vessel
                        </Link>
                    </div>
                </div>
            </CardBody>
        </Card>
    </div>
);

export default Sidebar;

What I have done so far:

1) I have been researching a possible solution and came across this source but it was not useful to solve the problem I have.

2) This post too but no example was provided and am not sure how to proceed. In addition always in the same post does not explain where to contain the pdf document. Should they be contained on my local machine or on an external front end tool such as Contentful?

3) Other posts I consulted are this post which is useful but there seems to be some security problems during the download when the website is online.

I am a bit confused on what the procedure should be and how to move on. Thanks for pointing me in the right direction to solving this problem.

Answer 1

This isn't a react specific issue. But if you want to make it more React-like, you could do:

import React from "react";

class DownloadLink extends React.Component {
    render() {
        return (
            <a href={this.props.src} download>{this.props.children}</a>
        )
    }
}


class MyComponent extends React.Component {
    render() {
        return (
            <DownloadLink src="/path/to/my.pdf">Click Here</DownloadLink>
        )
    }
}

Using an anchor and setting the download attribute will force it to download. There may be some cross browser issues with the download attribute, so usually adding target="_blank" also will ensure it works everywhere.

If you insist on using a button element, you can modify it to make a form and force it to get the file on submit:

class DownloadLink extends React.Component {
    render() {
        return (
            <form method="get" action={this.props.src}>
                <button type="submit">{this.props.children}</button>
            </form>
        )
    }
}