HTML: How to download a pdf file using a link

Question

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.

score 1 · Accepted Answer · answered Mar 02 '20 at 18:53

1

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

answered Mar 02 '20 at 18:53

Ian Devlin

18,534
6
55
73

Thanks for reading the question. I updated the question with **EDIT 2** above with your suggestion but nothing happened. Am I doing it still incorrectly? – Emanuele Mar 02 '20 at 19:00
[This](https://i.imgur.com/ycwg6uc.png) is what I am getting. Is that helpful? – Emanuele Mar 02 '20 at 19:01
`download` is a Boolean attribute, it doesn't need a value (here) but that shouldn'T cause that issue. Is `ship.projectnotes` definitely the correct value? Perhaps the data has issues? – Ian Devlin Mar 02 '20 at 19:27
Yes, I tried with and without attribute. I think is the correct value. How can I `console.log()` to make sure it actually is? Maybe I am setting the path incorrectly. – Emanuele Mar 02 '20 at 19:32
Yeah it sounds like the path is wrong to me. You should be able to see the value of `href` in the browser, you can check there if it's correct or not. – Ian Devlin Mar 02 '20 at 19:33
Thanks and how do I check that? – Emanuele Mar 02 '20 at 19:43
Like, How can I `console.log()` the `href`? – Emanuele Mar 02 '20 at 19:44
You shouldn't need to? When your page loads in the browser, use the developer tools to see the value stored in the `href`attribute of the `a` element? But you are logging `ship` already, so you should be able to see the value of `projectnotes` in there? – Ian Devlin Mar 02 '20 at 19:45
Ok [this](https://i.imgur.com/pLWZq1p.png) is the `console.log()`, do you see something I don't see? – Emanuele Mar 02 '20 at 19:55
Yes! `projectnotes` is an object, so you probably need to use `ship.projectnotes.fields.file.url` as the value for `href`. – Ian Devlin Mar 02 '20 at 19:56
Ok I see. Something just happened [here](https://i.imgur.com/zi7WJrT.png). I got an `Unhandled Rejection (TypeError): Cannot read property 'fields' of undefined`. The path is correct now, any idea? – Emanuele Mar 02 '20 at 20:03
Not without being able to see all of the code myself, it thinks that the object from which `fields` is being read, is undefined. I don't know why from here. – Ian Devlin Mar 02 '20 at 20:09
The code is in the question already. You can see `async componentDidMount()` with all the fields. Is that the function you were referring? – Emanuele Mar 02 '20 at 20:12
I mean being able to run it etc. It's easier to debug. – Ian Devlin Mar 02 '20 at 20:14
Found the error. Some of the fields in `Contentful` do not require a `pdf`. Therefore when there is no file, there is an unhandled error. So the path is correct, but there is no loop that handles empty fileds. You think you could help me with that if you have time? :) – Emanuele Mar 02 '20 at 21:26
I don't use React at all, but in your existing `render` function, isn't it possible to check for the missing fields in there and do something else other than returning the HTML? – Ian Devlin Mar 03 '20 at 09:41

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Hello

Dear, You an try to use this

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 02 '20 at 19:19

Masud Rana

590
1
8
17

HTML: How to download a pdf file using a link

2 Answers2

Hello