I have a django app, with a vuejs frontend.
I'm making a PUT request from my Vue front-end. As a response, I want a xlsx file to be generated & downloaded.
For some reason, the file isn't being downloaded. Here's the generate & download function.
def export_to_main(request):
if request.method == 'PUT':
response = HttpResponse(content_type='application/vnd.ms-excel')
response['Content-Disposition'] = 'inline; filename="exported_to_main.xls"'
selected_claims = Claim.objects.filter(status='PA')
workbook = Workbook(encoding='utf-8')
group_header_style = easyxf(
"font: bold true; pattern: back-colour blue;")
number_style = easyxf(num_format_str="#,##0.00")
date_style = easyxf(num_format_str='DD-MM-YYYY')
sheet = FitSheetWrapper(workbook.add_sheet("Sheet 1"))
header_column = count()
sheet.write(0, header_column.next(), 'Book Number', group_header_style)
sheet.write(0, header_column.next(), 'Dossier', group_header_style)
sheet.write(0, header_column.next(), 'Dossier Type', group_header_style)
for i, claim in enumerate(selected_claims, 1):
try:
column = count()
sheet.write(i, column.next(), claim.book_nr)
sheet.write(i, column.next(), claim.kind)
sheet.write(i, column.next(), getattr(claim.letter_claim_type, 'label'))
except IndexError:
print("error"*5)
pass
# selected_claims.update(status='AP', exported_to_main=datetime.datetime.now())
workbook.save(response)
return response
If I print(response) I get the workbook in my console. So the excel is generated properly.
For some reason, it is not being downloaded on the frontend though.
Here's the vue code:
<v-row>
<v-btn
color="success"
@click="exportMain"
download
>
Export to main
</v-btn>
<v-spacer></v-spacer>
<v-btn
color="success"
:href="xls">
Export Excel
</v-btn>
</v-row>
and this method is being called on that button click:
export_to_main({commit}) {
const url = action="{% url 'control:export-to-main' %}"
commit('set_loading', true)
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
axios.put(url, { 'contentType': 'application/json' })
.then( (response) => {
commit('reset_error')
})
.catch( (error) => {
console.log(error)
this.error = error
})
.finally (() => {
commit('set_loading', false)
})
},
Edit: I observed that if I add a button like this, the file is being downloaded. So I think it's a frontend problem.
<a href="/analyzer/central-dev/demoproject/dossiers/export_to_main/">
test
</a>