CODEWITHSUNDEEP
javascripthtmlreactjscontentful
Emanuele
Emanuele

Reputation: 2384

HTML: How to download a pdf file using a link

I am trying to download a .pdf document from the external database Contentful using an HTML link on a user interface as shown below.

The problem I have is that everytime I click the link "PROJECT NOTES" I am redirected to an error page. Why my link does not download the pdf file?

map

Below the code I am using:

import Client from '../Contentful';


class Sidebar extends React.Component {
state = {
    ships: []
};

async componentDidMount() {
    let response = await Client.getEntries({
        content_type: 'cards'
    });
    const ships = response.items.map((item) => {
        const {
            name,
            slug,
            projectnotes
        } = item.fields;
        return {
            name,
            slug,
            projectnotes
        };
    });

    this.setState({
        ships
    });
}


getFilteredShips = () => {
    // operations .......
};

render() {
    return (
        <div className="map-sidebar">
            {this.props.activeShipTypes}
            <pre>
                {this.getFilteredShips().map((ship) => {
                    console.log(ship);

                    return (
                        <Card className="mb-2">
                            <CardImg />
                            <CardBody>
                                <CardTitle>
                                    <h3 className="thick">{ship.name}</h3>
                                </CardTitle>
                                <Row style={{ marginTop: '20px' }}>
                                    <div className="buttoncontainer">
                                        <div className="btn btn-cards">
                                            <a className="buttonLink" href={ship.projectnotes}>
                                                Project Notes
                                            </a>
                                        </div>
                                        <div className="btn btn-cards">
                                            <a className="buttonLink" href={ship.distancesandcontours}>
                                                Dist and Contours
                                            </a>
                                        </div>
                                    </div>
                                </Row>

                            </CardBody>
                        </Card>
                    );
                })}
            </pre>
        </div>
    );
}
}

export default Sidebar;

I can confirm that I am reading correctly the name of the field:

field

Maybe am I incorrectly assigning the path?

EDIT 2

I tried the following too but no download happened:

<a className="buttonLink" download={ship.projectnotes} href={ship.projectnotes}>Project Notes</a>

What I have done so far:

1) I was able to implement the link to the document but after I started using the external container Contentful, the pdf is not downloadable, contrarily to what I was hoping. Maybe there is an error in how I am assigning the path?

2) After researching more this problem I came across this post which was useful. It seems that in this post the problem could be the download?

I am a little bit confused. Thanks for pointing in the right direction.

Upvotes: 1

Views: 1632

Answers (2)

Masud Rana
Masud Rana

Reputation: 630

Hello

Dear, You an try to use this

<a className="buttonLink" href={yourDownloadFileLink} dowload>
     Click to download
</a>

Upvotes: 0

Ian Devlin
Ian Devlin

Reputation: 18870

You could try adding the download attribute to the a, it's quite well supported.

Upvotes: 1

Related Questions