Question

我正在使用 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 =“routes”是将要下载的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';
                }
              }
            });
      },
}

但这只是根据需要带来数据和武器，但是你怎么能在完成应用程序之后调用你用这个库下载的功能？我可以通过回调或承诺来实现，但我该如何调用该下载功能？

Answer 1

显然，图书馆没有这个功能。然后到组件我放了一个 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>

当promise结束时（已加载数据）：

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

我调用组件并下载。

Answer 2

我想这是一个较晚的响应，但是新版本的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');
  }
}

重要提示：仅当prop数据未定义时，此选项才可用。如果已定义数据，则使用该信息生成文件。

Answer 3

就我而言，我使用的是两个按钮，一个用于加载数据，另一个用于下载。而且更容易实现

完成请求后下载 - vue-json-excel

3 个答案: