My Objective:
I am utilizing Vue And Axios, with the goal of displaying the progress in percentage on the console.
The Challenge:
The request itself takes around 4 seconds or more because it fetches a large amount of data, processes it into an excel file, and then downloads it.
Approaches Tried:
I have explored two methods within Axios: onDownloadProgress and onUploadProgress.
The onDownloadProgress function works well but only triggers when the download initiates, not during the backend process of fetching data to generate an excel file (the most time-consuming task).
Here is the front-end implementation:
axios.get(`${env.ENDPOINT}reports/products/credits_export`, {
params: {
category_id: form_data.category_id
},
responseType: 'blob',
onDownloadProgress: (progressEvent) => {
let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(progressEvent.lengthComputable);
console.log(percentCompleted);
}
}).then((res) => {
const url = window.URL.createObjectURL(new Blob([res.data]));
const link = document.createElement('a');
const file_name = `${new Date().toISOString().slice(0,10)}.xlsx`;
link.href = url;
link.setAttribute('download', file_name);
document.body.appendChild(link);
link.click();
resolve(res.data);
}).catch((e) => {
reject(e);
});
Plan Going Forward:
Splitting my progress tracking into two parts:
- Download progress (using
onDownloadProgress) - Request progress (preparing the Excel file for download)