Angular ファイルダウンロード機能作成方法

アップロード機能はよく作成するのですが、ダウンロードは初めてだったので記事にしました
機能自体は本当に簡単に実装することができるので、コピペでも動きます

// tsファイル
download_file(path: string) {
        (async () => {
            // fetchでアクセス.
            const res = await fetch("http://localhost:5000/" + path);
            // Blob形式でデータ取得.
            const blob =  await res.blob();
            const url = window.URL.createObjectURL(blob);
            let title = "Angular_sample_file";
            
            // aタグを作成して無理やりクリック -> ダウンロード機能発火
            let a = document.createElement('a');
            document.body.appendChild(a);
            a.setAttribute('style', 'display: none');
            a.href = url;
            a.download = title;
            a.click();
            window.URL.revokeObjectURL(url);
        })();
    }
// htmlファイル
<div (click)="download_file('https://wired.jp/wp-content/uploads/2018/01/GettyImages-522585140.jpg')"

※画像はこちらのリンクを利用させていただいております Wired様リンク

実際に動かすとダウンロードされ、

このように画像を開くことができます！

参考にした記事

[フロントエンド] fetchAPIで画像(バイナリーデータ)を取得する

Angular 4 download file from server via http