【Laravel】【Vuejs】動的に生成したファイルをjavascript経由でダウンロードしたい

Question

PDFの書類を動的に生成するアプリケーションを作成しています。
DomPDFでPDFを生成しているのですが、ダウンロードを開始するまで数秒かかってしまいます。
ダウンロード開始まで画面に動きがないのでユーザーが不安になるかと考えています。

そのため、javascriptでローディングのような事が出来ないか考えています。
非同期でファイルを生成して、ダウンロードするまでのローディングを表示できれば改善できるかと考えています。

ただ、ファイルの生成してフロントエンドで受け取ることはできるのですが、ダウンロードの処理が動作しません。
恐らく、Laravel環境が起因していると考えているのですが、解決方法が見つかりません。

ご助言をいただけないでしょうか？

お伺いしたい事

Laravelの場合、URLのルーティングを設定します。
そのため、javascriptのURL.createObjectURL()で生成されたURLもこのルーティングが適用されてしまいます。
回避方法はあるのでしょうか？
それとも、別の箇所に問題があるのでしょうか？

ソース

バックエンド

ルーター

下記にアクセスすると、application/pdfのデータが返って来ます。

https://example.com/api/user/1/pdf/download

// router/api.php
Route::get('/users/{user}/pdf/download', 'Api\TestController@downloadPDF')

コントローラー

Laravel-Dompdfでファイルを生成して、戻り値はpdfの内容をbodyに設定して返します。
下記のテストコードは簡単ですが、実際にはbladeテンプレートで動的に表示する要素が多数あります。

// Http/Controllers/TestController.php

public function downloadPDF {
    $pdf = \PDF::loadView('pdf_template');
    return $pdf->download('sample.pdf');
}

フロントエンド

PDFをAPI経由で取得してダウンロードする処理です。
レスポンスで返ってきたファイル、URL.createObjectURLで生成されたURLからダウンロードさせたいと考えています。

<template lang="pug">
a(@click.prevent.stop="downloadPDF()") ダウンロード
</template>

<script>
    import axios from 'axios';

    export default {
        name: "DownloadPDFButton",
        props: {
            hotNewsId: {
                type: Number,
                required: true
            }
        },
        methods: {
            downloadPDF() {
                axios.get('https://example.com/api/user/1/pdf/download', {
                    responseType: 'blob',
                    params: {
                        api_token: '(APIトークン)'
                    }
                }).then(response => {
                    console.log("ok");
                    const file = new Blob(
                        [response.data],
                        {
                            type: 'application/pdf'
                        },
                    );

                    // リンクを作成して発火
                    const link = document.createElement('a');
                    let fileUrl = URL.createObjectURL(file);
                    link.download = 'test.pdf';
                    link.click();

                    // リンク無効化
                    setTimeout(function() {
                        window.URL.revokeObjectURL(fileUrl);
                    });

                }).catch(function() {
                    // ダウンロード失敗
                    console.log('error');
                })
            },
        }
    }

</script>

状況

下記で一時的なリンクを発火させましたが、ダウンロードが始まりません。

// リンクを作成して発火
const link = document.createElement('a');
let fileUrl = URL.createObjectURL(file);
link.download = 'test.pdf';
link.click();

所見

お伺いしたいことに記載しましたが、恐らくURL.createObjectURL(file) で生成されたURLが、Laravelのルートに干渉してしまったのではないかと考えます。