Use FileSaver.js https://github.com/eligrey/FileSaver.js/wiki/Saving-a-remote-file#using-http-header
<?php
namespace App\Http\Controllers\Api\V1;
use Illuminate\Http\Request;
use Spatie\MediaLibrary\Media;
class DownloadController extends ApiController
{
public function __construct()
{
}
/**
* Download media based on media id
* @param Request $request
* @param $media_id
* @return Media
*/
public function downloadMedia(Request $request, $media_id)
{
$media = Media::findOrFail($media_id);
return $media;
}
}
// download API in routes/api.php
$api->get('media/{media_id}/download','DownloadController@downloadMedia');
<table class="table">
<tbody>
<tr *ngFor="let file of uploaded_files">
<td>{{ file.name }}</td>
<td>
<button type="button" class="btn btn-primary btn-sm pull-right"
aria-label="Close" (click)="downloadFileService.downloadFile(file)">
<i class="fa fa-download"></i>
</button>
</td>
</tr>
</tbody>
</table>
@Component({
templateUrl: './relocation-view.component.html',
styleUrls: ['./relocation.component.scss']
})
export class RelocationViewComponent extends Component implements OnInit, OnDestroy {
uploaded_files: File[] = [];
constructor(
public downloadFileService: DownloadFileService
) {
}
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import saveAs from 'file-saver';
@Injectable()
export class DownloadFileService {
private static base_url: string = '';
constructor(
private http: HttpClient
) {
}
downloadFile(file: any) {
const url = DownloadFileService.base_url + '/' + file.id + '/download';
const response_file = this
.http
.get(url, { responseType: 'blob' })
.subscribe(
res => {
saveAs(res, file.name);
}
);
return response_file;
}
}