Aug 23, 2023
0
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);
}
Please or to participate in this conversation.