Download PDF automatically after getting file path string from api call

Question

I have this code snippet that returns a string that is a path to a pdf file. I was wondering, instead of returning just the string, can I get it to automatically download the pdf in the browser after I make this call? If so, how?

getMergedPDF(filesToUpload: Array<string>) {
    return this.http.post<string>('http://localhost:8080/merge-pdf', filesToUpload)
    .subscribe(data  => this.mergedUrl = data);
  }

Where string returned above is a file path: /Users/foo/Documents/PDFMerger/PDFMerger/server/test-pdfs/merged-pdf.pdf

EDIT: When I try the solutions below, the file fails to load.

Hi. I came her by your request. I'm not sure why your solution doesn't work, but if I must guess thats because you don' have any servers serving your pdf file? If you so should change your url from 'localhost:4200/.../' to 'file://users/.../'. If I were you I would try to let ng serve host and serve my pdf file. Put it inside an assets folder inside your angular project. The url should then look something like 'localhost:4200/assets/merge-pdf.pdf'. This would be a first step approach just to make sure your typescript code is getting the file correctly. — jonas
– jonas, Commented Mar 12, 2019 at 8:18

Anurag Srivastava · Accepted Answer · 2019-03-08 20:28:33Z

1

You would have something like:

.subscribe(data  => {
  var dl = document.createElement('a');
  dl.setAttribute('href', data);
  dl.setAttribute('download', 'pdfname.pdf');
  document.body.appendChild(dl);
  dl.click();
  document.body.removeChild(dl);
});

edited Mar 8, 2019 at 20:28

answered Mar 8, 2019 at 20:02

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Euridice01 Over a year ago

What is "a" here?

Anurag Srivastava Over a year ago

The HTML anchor tag

Euridice01 Over a year ago

Should appendChild(a) be appendChild(dl) instead?

Euridice01 Over a year ago

Also it seems like you're close but it returns a file on path: localhost:4200/(filepath-i-specify-above) which it doesn't find.

Anurag Srivastava Over a year ago

Edited. And you would need to have relative file paths for this to work.

|

condor304 · Accepted Answer · 2019-03-08 21:55:53Z

1

you can try this:

            getMergedPDF(filesToUpload: Array<string>) {
    return this.http.post<string>('http://localhost:8080/merge-pdf', filesToUpload)
    .subscribe(data  => {
             this.mergedUrl = data;
             this.getPDF(this.mergedUrl);});
getPDF(uri){
this.http.get(uri, { responseType: 'blob' }) .subscribe(x=>{

            var newBlob = new Blob([x], { type: "application/pdf" });

           //IE Fix
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveOrOpenBlob(newBlob);
                return;
            }
            const data = window.URL.createObjectURL(newBlob);
            var link = document.createElement('a');
            link.href = data;
            link.download = "merge.pdf";
            link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));

            setTimeout(function () {
                window.URL.revokeObjectURL(data);
                link.remove();
            }, 100);
        });

edited Mar 8, 2019 at 21:55

answered Mar 8, 2019 at 20:07

condor304

2094 silver badges8 bronze badges

3 Comments

Euridice01 Over a year ago

ReferenceError: x is not defined

condor304 Over a year ago

You are getting a link back not the object. I have modified my answer. now it should work

Euridice01 Over a year ago

I get this error: HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "localhost:4200/Users/~/Documents/PDFMerger/PDFMerger/server/…", ok: false, …}

Collectives™ on Stack Overflow

Download PDF automatically after getting file path string from api call

2 Answers 2

10 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related