Angular save download file

Question

I'm writing a web-app with angular frontend and php backend in angular facing the challenge now, when trying to download a file it is loaded completely by the following script.

Angular service:

downloadFile(f:string){    
    this.http.post('/api/download.php', JSON.stringify({"file": f}), {responseType:'arraybuffer'})
    .subscribe(response => {
        console.log(response);
    });
}

Used imports:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

The PHP file looks like this (works fine):

  include "config/var.inc.php";
  $dir = "../" . DATA_FOLDER . "/";
  $data = json_decode(file_get_contents("php://input"));
  $file = $dir . $data->file;

  if(file_exists($file)){
    header('Content-Description: download audio');
    header('Content-Type: audio/mpeg');
    header('Content-Disposition: attachment; filename="' . basename($file) . '"');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    readfile($file);
    exit;
  }

The console.log shows me the file is completely loaded (23300766 Bytes)

How can I deliver it to the user as a download file?

Please provide screenshot of the console for possible solutions. — Uğur Dinç, Sep 20 '18 at 20:30
Try this > https://stackoverflow.com/a/21730535/5116121 . You will need to change the part `type: 'application/pdf'` to your expected content-type, which seems to be `audio/mpeg` . — Uğur Dinç, Sep 20 '18 at 21:18
The problem on that solution is it'll open the file in the browser instead of downloading it. — LUXS, Sep 20 '18 at 21:26
This works, but it's more a workaround than a solution. I am creating a link and clicking it?! Thank you so far. — LUXS, Sep 20 '18 at 21:44
If you would like to venture more, I'd suggest you to focus your search on how to accomplish your gaol in javascript as it's not related to Angular from this point on. — Uğur Dinç, Sep 20 '18 at 21:56

score 0 · Answer 1 · answered Mar 22 '19 at 09:12

You can use file-saver (https://www.npmjs.com/package/file-saver)

This is my piece of code:

import * as FileSaver from 'file-saver';

downloadTemplate(filePath: string) { // Example: filePath = '/file-path/download.docx'
    this.http.post(`http://endpoint/download`, filePath, { observe: 'response', responseType: 'blob' })
        .subscribe((response) => {
            this.saveFile(response);
        });
}

private saveFile(response) {
    const fileName = this.getFileNameFromHttpResponse(response);
    FileSaver.saveAs(response.body, fileName);
}

private getFileNameFromHttpResponse(httpResponse) {
    const contentDispositionHeader = httpResponse.headers.get('Content-Disposition');
    const result = contentDispositionHeader.split(';')[1].trim().split('=')[1];
    return result.replace(/"/g, '');
}

Note: If you want to get the file name from the response, you need to add this ("Access-Control-Expose-Headers: Content-Disposition") to the response header from the server.

Angular save download file

1 Answers1