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