Axios и CreateObjectURL: правильный способ загрузки данных blob? Моя попытка вызывает перезагрузку страницы
У меня есть кнопка с обработчиком события щелчка, который при нажатии будет использовать аксиомы для ПОЛУЧЕНИЯ файла, который находится на удаленном сервере (передает токен и получает
blob
responseType назад). Я не понимаю как использовать
Url.createObjectURL
с аксиомами. Я пытаюсь сделать так , чтобы браузер загрузил (или открыл?) Файл, когда пользователь нажимает «кнопку загрузки» для этого файла. К сожалению, моя текущая попытка заставляет браузер перезагружать страницу и добавлять в конце моего одностраничного приложения то, что я считаю хешированной строкой?
Как правильно скачать файл?
Вот моя попытка:
async getDownloadAttachmentApiUrl(e) {
const token = JSON.parse(localStorage.getItem('my-token'))
const bearer = 'Bearer ' + token[0].access_token
console.log(e.target.innerText) // example: attachments/5424/5424/24252345085_9cc011f4df_o.jpg
const instance = axios.create({
baseURL: 'my-api-domain-here',
responseType: 'blob',
headers: {
Authorization: bearer,
}
})
try {
const response = await instance.get('/Attachment?attachment=' + e.target.innerText)
const objectURL = URL.createObjectURL(response.data)
console.log(objectURL) // blob: https://lvh.me:8080/e6831f0d-b44f-4c50-b0c7-dc1389ee8cd7#/
Журнал консоли для
objectURL
является:
https://lvh.me:8080/e6831f0d-b44f-4c50-b0c7-dc1389ee8cd7#/
при нажатии на которую браузер просто перезагружает страницу и добавляет
#
в конце URL-адреса.
Вот код шаблона VueJS:
<button v-for="(attachmentFileName, index) in attachmentsJsonObject.attachments" :key="index" @click.prevent="getDownloadAttachmentApiUrl">
Download
</button>
Спасибо за любую помощь / разъяснения относительно правильного способа настройки!