How to download pdf file on button click in angular 6

Question

I want to download the .pdf file on button click I am using the below code

downloadMyFile() {
        const link = document.createElement('a');
        link.setAttribute('target', '_blank');
        link.setAttribute('href', 'http://designs.mydeievents.com/jq-3d-flip-book/books/pdf/aqua_imagica_visit_learnings.pdf');
        link.setAttribute('download', 'aqua_imagica_visit_learnings.pdf');
        document.body.appendChild(link);
        link.click();
        link.remove();
      }

<button (click)="downloadMyFile()">download File</button>

But when I click button it is redirected on a new page but I want to download 'aqua_imagica_visit_learnings.pdf' file on download. Kindly help me . here is my link [http://stackblitz.com/edit/angular-4hjad7]

` download` or just use regular link without any binding ` download` — Joel Joseph, Sep 19 '19 at 04:44
@joel when I am using these code download it is working but it is redirected on a new page but i want download the pdf file i don't want to redirect — Arjun Walmiki, Sep 19 '19 at 04:56

orlyohreally · Answer 1 · 2019-09-19T04:49:19.083

2

According to this .pdf file won't be downloaded if you use download attribute on anchor:

Some file types, however, (such as images, .pdf, .txt, and .doc for example) won’t be downloaded. They, instead, will be opened in the browser.

edited Sep 19 '19 at 04:49

answered Sep 19 '19 at 04:40

orlyohreally

410
6
19

your link is broken – Joel Joseph Sep 19 '19 at 04:47
@orlyohreally thank you to reply pls if you know the solution let me know. – Arjun Walmiki Sep 19 '19 at 04:48
@orlyohreally okay – Joel Joseph Sep 19 '19 at 04:52
@ArjunWalmiki try something of these answers https://stackoverflow.com/questions/35138424/how-do-i-download-a-file-with-angular2 – orlyohreally Sep 19 '19 at 05:04

Sagar Khatri · Answer 2 · 2020-08-04T10:37:23.443

1

Use inspect element and make sure your link looks something like this. Instead of

link.setAttribute('download', 'aqua_imagica_visit_learnings.pdf');

try doing it this way.

link.download = "aqua_imagica_visit_learnings.pdf";

edited Aug 04 '20 at 10:37

answered Sep 19 '19 at 06:39

Sagar Khatri

575
3
16

2

yes i try your solution but still, it is redirected on a new page. – Arjun Walmiki Sep 19 '19 at 06:48
can you try using any .img file to make sure that only some files like .PDFs have restriction in downloading? – Sagar Khatri Sep 19 '19 at 09:12
1

yes i also try with .img downloadMyFile() { const link = document.createElement('a'); link.setAttribute('target', '_blank'); link.setAttribute('href', 'http://designs.mydeievents.com/jq-3d-flip-book/books/image/2019-2020/Newlands_Year_Book/1.jpg'); link.download = '1.jpg'; document.body.appendChild(link); link.click(); link.remove(); } but it is redirect on another page. – Arjun Walmiki Sep 19 '19 at 09:46
Please create a stackblitz for this so we can figure out the root cause. – Sagar Khatri Sep 20 '19 at 06:34

score 1 · Accepted Answer · answered Sep 19 '19 at 07:11

1

You can download with ts:

 async download(id: number) {
        try {
            const res = await this.service.getDocument(id);
            this.downloadFile(res);
        } catch (e) {
            this.session.addSingleMessage(e.body.message);
        }
    }

    downloadFile(data) {
        const url = window.URL.createObjectURL(data);
        window.open(url);
    }

template:

<button click="download(1)>Download</button>

service:

 async getDocument(id: number): Promise<any> {
        this.session.setLoading();
        const resp = await this.httpClient.get(`/api/document/${id}/download`, { responseType: 'blob' }).toPromise();
        this.session.resetLoading();
        return resp;
    }

answered Sep 19 '19 at 07:11

tano

2,657
1
15
16

1

thank you to reply, But i am not using api i want to download pdf file from URL. – Arjun Walmiki Sep 19 '19 at 07:14
then you can replace `/api/document/${id}/download` to your url – tano Sep 19 '19 at 07:16
1

no i want to download from this URL "http://designs.mydeievents.com/jq-3d-flip-book/books/pdf/aqua_imagica_visit_learnings.pdf" – Arjun Walmiki Sep 19 '19 at 07:20
change the href target from _blank to _self – tano Sep 19 '19 at 07:22
1

when i am using _self so it overrides the my website page and directly pdf file is open. – Arjun Walmiki Sep 19 '19 at 08:48

score 0 · Answer 4 · answered Jan 12 '23 at 07:59

0

you can add this line on your html code,it works for me:

<a href="download/acme.pdf" download="Acme.pdf">Download pdf file</a>

answered Jan 12 '23 at 07:59

Farouk Mhamdi

311
2
8

How to download pdf file on button click in angular 6

4 Answers4