typescript 来自Laravel API的Angular下载文件

Posted 2021-05-20

<?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;
    }
}