Скачать после завершения запроса - vue-json-excel - PullRequest
Новая
       22

Скачать после завершения запроса - vue-json-excel

0 голосов
/ 29 апреля 2018

Я использую библиотеку vue-json-excel , которая помогает мне загружать данные из json.

где, по мнению Vue, у меня есть: 

<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>

Где: data = "route" - это json, который будет загружен: 

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',
        },
      ],
    ],
  }
}

Согласно документации, я должен сделать это, чтобы загрузить Excel, и он работает правильно. У меня проблема в том, что он загружается при наличии существующих данных, но я работаю с данными, которые поступают с сервера и предварительно загрузили данные в load (), но это занимает много времени, когда существует большой объем данных чтобы войти в этот раздел страницы, поэтому я предпочитаю, чтобы кнопка загрузки компилировала данные, а затем загружала.

Пока у меня есть: 

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';
                }
              }
            });
      },
}

Но это просто приводит данные и оружие в соответствии с необходимостью, но как вы могли бы после заполнения приложения вызвать функцию, которую вы загружаете с этой библиотекой? Я мог бы сделать это с помощью обратного вызова или обещания , но как я могу вызвать эту функцию загрузки?

Ответы [ 2 ]

0 голосов
/ 28 сентября 2018

Я предположил, что это немного поздний ответ, но новая версия vue-json-excel поддерживает функцию обратного вызова для извлечения данных перед загрузкой файла. 

<json-excel
  class   = "button is-primary"
  fetch = "MyCallbackFetchData"
 :fields = "json_fields_routes">

 Descargar Archivo
</json-excel>

Обратный вызов может выполняться с опцией async ... await, поэтому вы можете использовать асинхронные вызовы, такие как: 

methods:{
  async MyCallbackFetchData(){
      return await axios.get('myapiurl');
  }
}

ВАЖНО: эта опция работает только тогда, когда данные опоры не определены. Если данные определены, то файл, который он генерирует с этой информацией.

0 голосов
/ 04 мая 2018

Ну, по-видимому, библиотека не имеет такой функциональности. затем к компоненту я положил 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>

и когда обещание заканчивается (загружены данные): 

this.$refs.droute.$el.click();

Я вызываю компонент и скачиваю.

...