Javascript / jquery 下载图片

Question

I want to know how i can handle to download a image that come from a header response:

HTTP/1.1 200 OK
Date: Sun, 14 Jun 2020 23:23:29 GMT
Server: Apache/2.4.39 (Win64) OpenSSL/1.0.2s PHP/7.1.30
X-Powered-By: PHP/7.1.30
Content-Disposition: attachment; filename="flyer.png"
Cache-Control: no-cache, private
Set-Cookie: XSRF-TOKEN=eyJpdiI6IkhTNWFcL29QQU11UkZOeWZka1ZZdlBBPT0iLCJ2YWx1ZSI6Inhwbm5WdEdCNnVqTlk1VVk5N2JjMHFsM2lmT3g1UmVhbHY5N3VtRjFmalI4VmM1STN3VUE5YWVPRHFZWVJab2dqZGFERnR4cGxmNktwdXNIWExuY2pnPT0iLCJtYWMiOiI4N2UxM2Y5MGM0MWJiNGVmNzJiMjdlYzc2NjQwODhjN2Q0OWM2ODM5MjA0MGRiYjQxZmY2ZDRiODViZDE5M2M1In0%3D; expires=Mon, 15-Jun-2020 01:23:31 GMT; Max-Age=7200; path=/
Set-Cookie: laravel_session=1IVT1owUoiIxjWKmDBF5WtJgHQCt0pDUZ39IGzeb; expires=Mon, 15-Jun-2020 01:23:31 GMT; Max-Age=7200; path=/; httponly
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: image/jpeg

Here a sketch of my script:

$.get("{!!route('gerarFlyerImage')!!}",dados).done(function(data){

    console.log(data);
    saveData(data, 'filename.png');    
})


function saveData(blob, fileName) // does the same as FileSaver.js
{
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";

    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
}

But saveData() not working some idea?

Answer 1

Try this - Download images from your url.

Demo: https://jsfiddle.net/usmanmunir/fx8Lzt4g/18/

JS Script

function downloadFile(fileName) {
    $.ajax({
        url: '{!!route('gerarFlyerImage')!!}',
        method: 'GET',
        data: dados,
        xhrFields: {
            responseType: 'blob'
        },
        success: function (data) {
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(data);
            a.href = url;
            a.download = fileName;
            document.body.append(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
        }
    });
}

Hope this helps.