[Vuejs]-How to download a file from json api backend using vue?

by

0👍

You should change the responseType for a blob, so axios you properly parse the data. Your back-end must return the header content-disposition: attachment in this file.

Also, I don’t think you will be able to download it via Ajax. I can’t understand your justification for an anchor, what LocalStorage change there?

👤Edmundo Santos

0👍

Please try below:

<a href="project.export_pdf" target="_blank">Export to PDF</a>
👤Tessy Thomas

0👍

I decided to add download token at the end of a download link.

So, now I can do the following 

http://localhost:3000/api/v1/projects/28/export?tkn=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9

and then, on my frontend

<li><a :href="dllink" download='report.pdf'>Export as PDF</a></li>

–

dllink () {
 let tkn = window.localStorage.getItem('tkn')
 return `${this.project.export_pdf}?tkn=${tkn}`
}
👤kirqe

Leave a comment