Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Shiva's avatar
Level 5

How to get my report to stop downloading in vue

I'm trying to create a link where I can download an excel file. The problem is, is that I have a job that will create the excel file and I need to wait for that job to finish. The code that I've written in the front end does do what I need it to do, but even after I'm able to download the excel Also I noticed that in my dev tools under network after the inital request then it keeps saying disk cache file the code still keeps executing and doesn't stop. Here is my vue file

<template>
    <div class="card" style="width: 100%;">
        <div class="card-body">
            <ul>
                <li class="nav-item">
                    <a class="nav-link text-success downloadReport" @click="downloadReport">
                        <i v-if="!showSpinner" class="fas fa-file-excel"></i>
                        <i v-if="showSpinner" class="fa-solid fa-spinner fa-spin-pulse"></i>
                        Report
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        props: [],
        data() {
            return {
                pollingInterval: null,
                showSpinner: false
            }
        },
        mounted() {

        },
        methods: {
            downloadReport() {
                this.pollingInterval = setInterval(this.checkCondition, 2000);
            },
            async checkCondition() {
                this.showSpinner = true;
                const response = await axios.get("/download/report"); 
                if(response.data !== '')
                {
                    clearInterval(this.pollingInterval);
                    const link = document.querySelector('.downloadReport');
                    link.href = "/download/report";
                    link.click();

                    this.showSpinner = false;
                }
            },
        }
    }
</script>

My Controller function

public function downloadReport()
{
    $report = reportService()->downloadReport('FullReport', request()->user());
    return $report;
}

My downloadReport function

public function downloadReport(string $report, User $user)
{   
    ExcelReport::dispatch('FullReport', $user);
    $cache = Cache::get('FullReport-'.$user->id);

    if(!is_null($cache))
    {
        $path = $cache;
    }else{
        $path = '';
    }

    return response()->download($path);
}

My ExcelReport Job

public function handle()
{
    $cacheKey = $this->reportName.'-'.$this->user->id;

    $report = excelReportService()->getFullReport($this->reportName, $this->user);
    Cache::put($cacheKey, $report);
}
0 likes
0 replies

Please or to participate in this conversation.