I would suggest to do a BLOB when downloading a file with ajax. In my case im using axios but that should not be any different to make with ajax.
let laddaExportButton = Ladda.create(document.querySelector('.ladda-export-button'));
laddaExportButton.start();
laddaExportButton.setProgress(1);
axios({
url: '/download/path/to/excel',
method: 'GET',
responseType: 'blob',
params: params
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', page + '_' + moment(moment.now()).format("DD_MM_YYYY_HH_mm_ss") + '.xls');
document.body.appendChild(link);
link.click();
laddaExportButton.stop();
}).catch((error) => {
laddaExportButton.stop();
});
In my backend i have a lot of classes built around the download but in the end i just do this:
i just download the file like you do
resolve(Excel::class)->download($this, $fileName, $writerType ?? $this->writerType ?? null);