Есть ли способ отправить запрос GET в конечную точку API для xlsx для использования vuejs?

#vue.js #django-rest-framework

#vue.js #django-rest-framework

Вопрос:

Я уже настроил конечную точку, которая возвращает определенные данные на основе созданного мной фильтра даты. И при использовании?format= xlsx он загружает файл xlsx со списком конкретных данных на основе запрошенного фильтра даты. Я также закончил с функцией поиска во внешнем интерфейсе, передав URL в searchCarriers, единственное, чего сейчас не хватает, это иметь загружаемый xlsx во внешнем интерфейсе. Как я могу это сделать?

Это мой DateFilter

 class CarrierFilter(django_filters.FilterSet):
    date_app_rec__gte = DateFilter(field_name='date_app_rec', lookup_expr='gte')
    date_app_rec__lte = DateFilter(field_name='date_app_rec', lookup_expr='lte')
    date_sample_rec__gte = DateFilter(field_name='date_sample_rec', lookup_expr='gte')
    date_sample_rec__lte = DateFilter(field_name='date_sample_rec', lookup_expr='lte')
    date_of_qca__gte = DateFilter(field_name='date_of_qca', lookup_expr='gte')
    date_of_qca__lte = DateFilter(field_name='date_of_qca', lookup_expr='lte')
    date_created__gte = DateFilter(field_name='date_created', lookup_expr='gte')
    date_created__lte = DateFilter(field_name='date_created', lookup_expr='lte')
    patient_name = CharFilter(field_name='patient_name', lookup_expr='icontains')

    class Meta:
        model = Carrier
        fields = ('date_app_rec__gte', 'date_app_rec__lte', 
                'date_sample_rec__gte', 'date_sample_rec__lte',
                  'date_of_qca__gte', 'date_of_qca__lte',
                  'date_created__gte', 'date_created__lte',
                  'patient_name',)
  

Это мой ModelViewSet

 class CarrierViewSet(XLSXFileMixin, ModelViewSet):
    queryset = Carrier.objects.all()
    serializer_class = CarrierSerializer
    permission_classes = (IsAuthenticated,)
    parser_classes = (MultiPartParser,) #  for uploading of attachments
    filename = 'carrier-reports.xlsx'
    filter_class = (CarrierFilter)  # filtering From date and To date
    filterset_fields = ('patient_name', 'promo_code')
    search_fields = ('patient_name', 'promo_code', 'insurance_verified_tsg_verification')
  

Это возвращает все конкретные даты в таблице во внешнем интерфейсе

 searchCarriers: function () {
      // Search function
      api_url = `/api/v1/carrier/?date_app_rec__gte=${this.carrier_from_date_app_rec}amp;date_app_rec__lte=${this.carrier_to_date_app_rec}amp;date_sample_rec__gte=${this.carrier_from_date_sample_rec}amp;date_sample_rec__lte=${this.carrier_to_date_sample_rec}amp;date_of_qca__gte=${this.carrier_from_date_of_qca}amp;date_of_qca__lte=${this.carrier_to_date_of_qca}amp;date_created__gte=${this.carrier_from_date_created}amp;date_created__lte=${this.carrier_to_date_created}amp;patient_name=${this.carrier_search_patient_name}`
      this.searching = true;
      this.$http.get(api_url)
        .then((response) => {
          this.carriers = response.data;
          this.searching = false;
        })
        .catch((err) => {
          this.searching = false;
          console.log(err);
        })
    },
  

Ответ №1:

Вы можете запросить URL, как вы делаете, используя GET но вы должны позаботиться о том, что вы делаете

Интерфейсная сторона: использование атрибута download

  this.$http.get(api_url)
    .then((response) => {
     let a= document.createElement('A')
     a.href= response.data
     a.download = true
     document.body.appendChild(a)
     a.click()
    }
  

если вы не хотите отображаться, вы можете управлять с помощью CSS display:none или opacity:0

Внутренняя сторона:

вы должны добавить к данным или ссылке, которую вы предоставляете в качестве заголовка ответа Content-Disposition

 Content-Disposition: 'attachment'  // for example
  

Комментарии:

1. Спасибо за ответ, я уже создал функцию в своем js-файле, аналогичную URL-адресу в моих поисковых карриерах. Должен ли я поместить функцию в v-on:click.prevent? Я использовал ссылку a href с загрузкой в нем. Но по какой-то причине; Он загружает всю страницу.

2. потому что вам нужно добавить в a href URL-адрес данных, которые вы хотите загрузить, вместо .html страницы

3. Итак, вы имеете в виду, что мне придется передать конечную точку API в href с помощью ? formar=xlsx? Если это то, что вы имели в виду, я уже сделал это, но я перенаправляет меня прямо на API.