Скачивание картинки по прямой ссылке в браузере

15 марта 2021, 11:00

Нужно сделать так что бы по клику на картинку, она начинала скачиваться пользователю на компьютер. Ссылка на картинку приходит от сервера. Как это можно реализовать средствами js, пробовал атрибут "download", но картинка открывается в новой вкладке браузера. Подскажите пожалуйста решение.

Answer 1

Я составил пример в котором:

открываю файл в новой вкладке браузера
скачиваю файл
вставляю содержимое файла в тело текущей страницы

Для примера использую картинку.

const request = new XMLHttpRequest(); 
 
// с помощью ajax запроса получаем картинку в виде бинарных даннных 
request.open('GET', 'https://ru.stackoverflow.com/content/Shared/balsamiq/wmd-mockup-button.png', true); 
 
// обязательный параметр, с помощью него в результате запроса мы получим Blob объект который содержит информацию о файле 
request.responseType = 'blob'; 
 
request.onload = () => { 
    // в момент вызова этой функции в переменной request.response 
    // будет javascript объект типа Blob 
 
    // создаём ссылку на Blob-файл (не путать с base64!), по этой ссылке можно открыть или скачать файл 
    // такая ссылка имеет особый вид `blob:https://ru.stackoverflow.com/a6fb157b-d130-4b7a-a372-e183a95292c1` 
    const url = window.URL.createObjectURL(request.response); 
 
    // открыть файл в новой вкладке 
    window.open(url); 
 
    // скачать файл 
    const link = document.createElement('a'); // создаём ссылку 
    link.href = url; 
    link.setAttribute('download', 'test.png'); // чтобы при скачивании файл назывался как нам нужно - указываем явно имя в атрибут ссылки  
    document.body.appendChild(link); 
 
    // программно имитируем клик по ссылке чтобы браузер инициировал скачивание файла 
    link.click(); 
 
 
    // считать файл и вставить в тело страницы 
    const reader = new FileReader(); 
    reader.readAsDataURL(request.response); 
    reader.onload = e => { 
        // таким образом делаем предпросмотр картинки 
        const img = document.createElement('img'); 
        img.src = e.target.result; 
        document.body.appendChild(img); 
 
        console.log('DataURL:', e.target.result); // выводим в консоль base64 строку из которой состоит файл 
    }; 
}; 
 
request.send();

Для получения файла с помощью ajax вы так же можете использовать библиотеки axios или jquery.

Пример с axios.

Answer 2

Этот способ работает, если у сайта и картинки одинаковый домен.

var image = document.querySelector('img'); // получить элемент с картинкой
image.onclick = function() {    
    var a = document.createElement("a");    
    a.setAttribute("href", image.src);
    a.setAttribute("download", "");
    a.click();
}