Как реализовать загрузку файлов по ссылке?

Question

[Delawere]

Нужно сделать, чтобы по клике на ссылку автоматически начиналась загрузка файла.
Такое решение не работает:

<a href="localhost:8080/files/test.png" download="test.png" target="_blank">Download</a>

Клик по ссылке просто открывает png файл в новой вкладке.

Если в такую же ссылку подставлять url файла загруженного через input type="file", то все работает как нужно.

В чем может быть ошибка?

Answer 1

[Delawere]

В итоге нашел такое решение:

const {data: response} = await getFile()
const uInt8Array = new Uint8Array(response)
let i = uInt8Array.length
const biStr = new Array(i)
while (i--) {
   biStr[i] = String.fromCharCode(uInt8Array[i])
}
const data = biStr.join('')
const base64 = window.btoa(data)

const link = document.querySelector('#uniqId')
link.href = 'data:image/png;base64,' + base64

И ставимresponseData = 'arraybuffer'

Всем спасибо!

Answer 2

[Maxim Kirshin]

Попробуйте сделать ссылку относительной, вида /files/test.png и убрать target="_blank"

Comments

[Delawere]

Если ссылаться на локальный файл, то наверняка будет работать. Мне нужно именно по внешним ссылками загружать изображения, то есть ссылка может быть и вида https://avatars.mds.yandex.net/something например

[Maxim Kirshin]

Delawere, атрибут работает только для same origin url'ов. С другого домена нельзя

download only works for same-origin URLs, or the blob: and data: schemes.

Тут можешь глянуть

[Delawere]

Maxim Kirshin, а возможно ли конвертировать файл из запроса в blob и давать ссылку уже на него?

Answer 3

[ThunderCat]

В чем может быть ошибка?

Никакой ошибки нет. Во первых так будет работать только со ссылками сэйм орижин, во вторых, что касается

а возможно ли конвертировать файл из запроса в blob и давать ссылку уже на него?

- ответ тот же - только с сейм орижин.

Единственно можете подменять ссылку на свою, перенаправлять на скрипт на своем сервере, котрый курлом заберет файл с удаленного сервера и уже от себя его отдавать с заголовком аттачмент.

Content-Disposition: attachment; filename="filename.jpg"