Download after completing the request - vue-json-excel - vue.js

Question

I'm using the vue-json-excel library that helps me download data from a json.
where in the view of the vue I have:
<div class="column is-narrow" #click="btDispatch">
<json-excel
class = "button is-primary"
:data = "routes"
:fields = "json_fields_routes"
:name = "`descarga-rutas.xls`">
<span class="icon"><i class="fa fa-download"></i></span><span>Descargar entregas</span>
</json-excel>
Where:data = "routes" is the json that will be downloaded:
data () {
return {
json_fields_routes: {
ruta_id: 'id',
fecha: 'date',
estado_codigo: 'route_state',
estado: 'estado',
vehículo: 'vehicle',
conductor_codigo: 'worker.id',
conductor_nombre: 'worker.name',
hora_inicio: 'date_start_web',
hora_fin: 'date_end_web',
entregas: 'dispatches_count',
pendientes: 'pendientes',
entregados: 'entregados',
parciales: 'parciales',
no_entregados: 'noEntregados',
},
json_meta: [
[
{
key: 'charset',
value: 'utf-8',
},
],
],
}
}
According to the documentation, I must do this to download Excel and it works correctly. The problem I have is that it is downloaded when there is existing data, but I am working with data that comes from the server and previously loaded the data in the load () but it takes a long time when there is a large amount of data to enter that section of the page, so I prefer that the download button compile the data and then download.
So far I have:
methods: {
btRoute() {
this.axios.post('/routesdownload/filter_route/', this.params)
.then((response) => {
this.routes = response.data.results;
for (let i = 0; i < this.routes.length; i++) {
this.routes[i].pendientes = this.filterByStatus(this.routes[i].dispatches, 1);
this.routes[i].entregados = this.filterByStatus(this.routes[i].dispatches, 2);
this.routes[i].parciales = this.filterByStatus(this.routes[i].dispatches, 3);
this.routes[i].noEntregados = this.filterByStatus(this.routes[i].dispatches, 4);
this.routes[i].date = moment(this.routes[i].date).format('YYYY/MM/DD');
if (this.routes[i].date_start_web && this.routes[i].date_end_web != null) {
this.routes[i].date_start_web
= moment(this.routes[i].date_start_web).format('YYYY/MM/DD HH:mm:ss');
this.routes[i].date_end_web
= moment(this.routes[i].date_end_web).format('YYYY/MM/DD HH:mm:ss');
} else {
this.routes[i].date_start_web = '-';
this.routes[i].date_end_web = '-';
}
if (this.routes[i].route_state === 1) {
this.routes[i].estado = 'Borrador';
} else if (this.routes[i].route_state === 2) {
this.routes[i].estado = 'Publicado';
} else if (this.routes[i].route_state === 3) {
this.routes[i].estado = 'Iniciado';
} else {
this.routes[i].estado = 'Terminado';
}
}
});
},
}
But this simply brings the data and the weapon according to the need, but how could you after completing the application, call the function you download with this library? I could do it with a callback or a promise, but how can I call that download function?

Answer 1

I suposed it's a little late response, but the new version of vue-json-excel support a callback prop to fetch data before download the file.
<json-excel
class = "button is-primary"
fetch = "MyCallbackFetchData"
:fields = "json_fields_routes">
Descargar Archivo
</json-excel>
The callback can run with the async...await option so you can use asyncrounous calls like:
methods:{
async MyCallbackFetchData(){
return await axios.get('myapiurl');
}
}
IMPORTANT: This option only works when the prop data it's undefined. If data it's defined then the file it's generate with that information.

Answer 2

Well, apparently, the library does not have that functionality.
then to the component I put a ref:
<json-excel
ref="droute"
class = "button is-primary"
:data = "routes"
:fields = "json_fields_routes"
:name = "`descarga-rutas.xls`">
<span class="icon"><i class="fa fa-download"></i></span><span>Descargar entregas</span>
</json-excel>
and when the promise ends(has the data loaded):
this.$refs.droute.$el.click();
I call the component and download.

Answer 3

In my case, i'm using two button, one for load data and one for donwload. and also its much easier to implement