Download file not working

Question

I am new to Javascript, I want to download a file that comes from a dynamic url after the result of a promise, it is a generated pdf which I am trying to download with the following call but unable to make it work as download doesn't start.

<button (click)='downloadMyFile()'>Download</button>

downloadMyFile(){
  //url 
  .then((result)=>{
   //result is contains a url www.abc.com/file234
    window.location.href = result
})
  .catch((error)=>{
   //myerror
})
}

Here is plunk

@meskobalazs when in postman I get a dialogbox saying to download file. it is a downloadable file. — localhost, Apr 20 '18 at 14:35
What happens when you open the result url in your browser? Alternatively you can wrap the button in an `` and just set the href on that once retrieved for a less javascript-y way of opening it. — Dominic, Apr 20 '18 at 14:37
isn't using a tag around button invalid ? the url pass some dynamic data which uses that value to get me a file. — localhost, Apr 20 '18 at 14:39
My answer here should help https://stackoverflow.com/a/48467727 — Dilip Nannaware, Apr 28 '18 at 07:21
Try to enter the url into your browser directly and if the download doesn't start this may help: if you load a file using a restful service (looks like you are using one) or request a file without extension make sure to include the mime type in the server response so it is recognized as a file. — Wolfgang, Apr 29 '18 at 10:55

Martin Adámek · Answer 1 · 2018-04-27T08:20:12.317

You can force download file like this:

const link = document.createElement('a');
link.href = result;
link.download = 'download';
link.target = '_blank';
link.click();

Simply create anchor tag, set its href and download attributes and trigger click event.

Also note that this is not really about URL ending with extension or not - it is more about the headers that you send with the file response (namely Content-Type and Content-Disposition).

sebu · Answer 2 · 2018-05-13T09:41:53.987

1

<button (click)='downloadMyFile()'>Download</button>

downloadMyFile(){
  .then((result)=>{
       var a= document.createElement('a');
       a.href = result;
       a.download = 'download name';
       a.click();
   }).catch((error)=>{})
}

edited May 13 '18 at 09:41

answered Apr 22 '18 at 17:59

sebu

2,824
1
30
45

What is the technic called? The syntax seems alien to me. – localhost Apr 22 '18 at 18:02
I will try, what if my ApiService take long to reply, How can I mock data with some url that doesn't end with a file extension? – localhost Apr 22 '18 at 19:28

Saeed · Answer 3 · 2018-04-22T19:01:25.453

Use this line of codes:

    //redirect current page to success page
    window.location="www.example.com/success.html";
    window.focus();

OR You can use pdf.js from http://mozilla.github.io/pdf.js/

    PDFJS.getDocument({ url: pdf_url }).then(function(pdf_doc) {
        __PDF_DOC = pdf_doc;
        __TOTAL_PAGES = __PDF_DOC.numPages;

        // Hide the pdf loader and show pdf container in HTML
        $("#pdf-loader").hide();
        $("#pdf-contents").show();
        $("#pdf-total-pages").text(__TOTAL_PAGES);

        // Show the first page
        showPage(1);
    }).catch(function(error) {

        alert(error.message);
    });;

Source and Complete code: http://usefulangle.com/post/20/pdfjs-tutorial-1-preview-pdf-during-upload-wih-next-prev-buttons

score 0 · Answer 4 · answered Apr 24 '18 at 06:59

0

instead of making ajax request to download file just do the following.

window.open(url);

answered Apr 24 '18 at 06:59

Rahul Bisht

144
6

score 0 · Answer 5 · answered Apr 25 '18 at 16:00

(3 different files) in app.module.ts :

 import {HttpClientModule} from '@angular/common/http';
 ...
 providers: [
    HttpClientModule,
    ...

in api.service.ts :

import {HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, HttpResponse} from '@angular/common/http';
...
public getMeMyPDF(): any {
    const url =  '/my/api/for/pdf';
    this.PDF = this.http.get(url, {
      observe: 'response',
      headers: new HttpHeaders({'Content-Type', 'application/pdf'}),
      responseType: 'text' as 'text' // <-- this part is rediculous but necessary
    }).catch(this.handleError);
    return this.PDF;
}

handleError(error: HttpErrorResponse) {
  console.log('an http get error happened.');
  console.error(error);
  let errorMessage;
  if (error.error instanceof Error) {
    errorMessage = `An error occurred: ${error.error.message}`;
  } else {
    errorMessage = `Server returned code: ${error.status}, error message is: ${error.message}`;
  }
  console.error(errorMessage);
  return errorMessage;
}

and in my.component.that.calls.api :

getMeAPDF(){
    this.apiService.getMeMyPDF().subscribe(res => {
      if(res !== null && res !== undefined){
        this.saveToFileSystem(res.body);
      }
    }, (error) => console.log(error), () => {});
  }

  private saveToFileSystem(response) {
    const blob = new Blob([response], { type: 'text/pdf' });
    const d = new Date();
    saveAs(blob, 'WOWPDF_' + this._datepipe.transform(d, 'yyyyMMdd_HHmmss') + '.pdf');
  }

Stéphane GRILLON · Answer 6 · 2018-04-27T09:59:30.183

use saveAs() function with npm install @types/file-saver --save-dev

or in package.json:

  "dependencies": {
    "file-saver": "^1.3.3"
  }

Sample to export CSV file:

HTML:

<button (click)="exportCsv()" id="exportCsv" class="btn btn-primary" type="submit">CSV Export</button>

Component:

import { FooService } from '../services/foo.service';

constructor(private fooService: FooService) { }

async exportCsv() {
  this.fooService.exportCsv(this.fooid);
}

Service (fooService):

import { saveAs } from 'file-saver';
import { HttpParams, HttpResponse} from '@angular/common/http';

exportCsv(fooid: string) {
    let params: HttpParams = new HttpParams();
    params = params.append('fooid', fooid);
    this.apiService.getCSVFile('api/foo/export', params).subscribe(response => this.saveToFileSystem(response)
    , error =>  this.errorProcessor(error));
}

private saveToFileSystem(response: HttpResponse<Blob>) {
    const contentDispositionHeader = response.headers.get('Content-Disposition');
    let filename = 'export.csv';
    if (contentDispositionHeader !== null) {
      const parts: string[] = contentDispositionHeader.split(';');
      filename = parts[1].split('=')[1];
    }
    const blob = response.body;
    if (blob !== null) {
        saveAs(blob, filename);
    }
  }

score 0 · Answer 7 · answered Apr 28 '18 at 07:13

You can download the response of your promise like mentioned below:

 var triggerDownload = function(url, fileName) {
      var a = document.createElement("a");
      a.setAttribute("href", url);
      a.setAttribute("download", fileName);
      opts.container.append(a);
      a.click();
      $(a).remove();
  };

  downloadMyFile() {
      promise
       .then((result) => {
          triggerDownload(result, 'xyz.pdf'); 
        })
       .catch((error) => {
          //myerror
      })
  }

score 0 · Answer 8 · answered Apr 28 '18 at 07:23

Here is the code that works for downloadign the API respone in IE and chrome/safari. Here response variable is API response.

 let blob = new Blob([response], {type: 'application/pdf'});
    let fileUrl = window.URL.createObjectURL(blob);
    if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileUrl.split(':')[1] + '.pdf');
    } else {
        window.open(fileUrl);
    }

score 0 · Answer 9 · answered Apr 29 '18 at 10:18

you can download any dynamic file by just write a download in the tag where you have fetch the url to the file. try this and let me know if it work for you.

here is the working example:

<a href="http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf" download>

score 0 · Answer 10 · answered Apr 29 '18 at 17:48

Javascript is not really required for this, so I will suggest the laziest and easiest possible solution - to simply use a basic html tag instead.

Instead of a button, use an anchor tag with the download keyword:

<a href="www.abc.com/file234" download="SuggestedFileName">Download</a>

Very old browsers that does not support HTML5 will fail elegantly - instead of downloading the target, older browsers will simply display the target in the browser. That's very graceful degradation and a fully acceptable fallback.

You can style the anchor to look like whatever you want with css, and is also the most semantically correct tag: anchors are for links (and this is a link) while buttons are for interacting with forms (like submit) or other interactions with the UI. THe end user won't know or care what tag you use anyway.

If the url will be changed, like getting different parameters based on interactions with the UI, you could always use javascript to update the URL on the tag - but that is a different question.

Reference for Anchor tag on MDN

Download file not working

10 Answers10