#環境
CentOS: 7.4
PHP: 7.2
Laravel: 5.6
#やりたいこと
ファイルをダウンロードした後にページをリロードさせたい。
今回はファイルアップローダーのようなシステムを作っているときに起きた問題です。
ファイルのダウンロード回数に制限があり、ダウンロードされると残りのダウンロード回数が減っていくため、ダウンロードした直後にページをリロードさせたいと考えました。
ここで1つ問題が。
以下はダウンロード処理が書かれたコントローラーです(かなり省略してます)。
コントローラー内ではファイルをダウンロードする処理とページをリロードする処理は同時に実行できません。。
public function download($id)
{
$file = File::find($id);
$fPath = $file->path; // ファイルパスを取得
$fName = $file->name; // オリジナルのファイル名を取得
return response()->download($fPath, $fName); // ダウンロード処理
// ダウンロード後にリロードができない。。
}
#どうするか
Javascript のクリックイベントでファイルダウンロードとリロードを同時に行います。
- ダウンロードボタンクリックで js イベントが発火
- ダウンロード用 URL を指定して新しいタブ(ウィンドウ)を開く
- コントローラーの download メソッドに処理が飛ぶ
- ファイルがダウンロードできる
- ダウンロードページをリロードする
コードは以下のとおり。
##HTML
カスタムデータ属性を利用して a
タグの中にファイル ID 埋め込んでいます。
<!-- ダウンロードボタンの部分のみ抜粋 -->
<a class="btn btn-sm m-1 btn-secondary text-light file-download-btn" data-file-id="{{ $file->id }}" role="button">
<i class="fas fa-file-download"></i> DL <!-- FontAwsome のアイコンです -->
</a>
##Javascript (jQuery)
$(function() {
$('.file-download-btn').on('click', function() { // DLボタンクリックで発火
var fileId = $(this).attr('data-file-id'); // カスタムデータ属性からファイルIDを取得
window.open('/file/' + fileId + '/download'); // URLを指定してタブを開く -> コントローラーでダウンロード処理が実行される
location.reload(true); // ページをリロードする
});
});
これでファイルのダウンロードとページのリロードを1つの処理で実現できました。