Axios и CreateObjectURL: правильный способ загрузки данных blob? Моя попытка вызывает перезагрузку страницы

У меня есть кнопка с обработчиком события щелчка, который при нажатии будет использовать аксиомы для ПОЛУЧЕНИЯ файла, который находится на удаленном сервере (передает токен и получает blobresponseType назад). Я не понимаю как использовать 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>

Спасибо за любую помощь / разъяснения относительно правильного способа настройки!

0 ответов

Другие вопросы по тегам