Pobierz Plik przez jQuery.Ajax

Noone dodał to @ Pekka ' s solution ... więc to opublikuję. To może komuś pomóc.

Nie możesz i nie musisz tego robić przez Ajax. Wystarczy użyć

window.location="download.action?para1=value1...."

Możesz z HTML5

NB: zwracane dane Pliku muszą być zakodowane w base64, ponieważ nie można kodować danych binarnych w JSON

W mojej odpowiedzi AJAX mam strukturę danych, która wygląda tak:

{
    result: 'OK',
    download: {
        mimetype: string(mimetype in the form 'major/minor'),
        filename: string(the name of the file to download),
        data: base64(the binary data as base64 to download)
    }
}

Oznacza to, że mogę wykonać następujące czynności, aby zapisać plik za pomocą AJAX

var a = document.createElement('a');
if (window.URL && window.Blob && ('download' in a) && window.atob) {
    // Do it the HTML5 compliant way
    var blob = base64ToBlob(result.download.data, result.download.mimetype);
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = result.download.filename;
    a.click();
    window.URL.revokeObjectURL(url);
}

Funkcja base64ToBlob została zaczerpnięta z tutaj I musi być używana zgodnie z tą funkcją

function base64ToBlob(base64, mimetype, slicesize) {
    if (!window.atob || !window.Uint8Array) {
        // The current browser doesn't have the atob function. Cannot continue
        return null;
    }
    mimetype = mimetype || '';
    slicesize = slicesize || 512;
    var bytechars = atob(base64);
    var bytearrays = [];
    for (var offset = 0; offset < bytechars.length; offset += slicesize) {
        var slice = bytechars.slice(offset, offset + slicesize);
        var bytenums = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            bytenums[i] = slice.charCodeAt(i);
        }
        var bytearray = new Uint8Array(bytenums);
        bytearrays[bytearrays.length] = bytearray;
    }
    return new Blob(bytearrays, {type: mimetype});
};

To dobrze, jeśli twój serwer wyrzuca pliki do uratowany. Jednak nie do końca wypracowałem, jak zaimplementować HTML4 fallback

1. Framework: Servlet pobierający plik jako załącznik

<!-- with JS -->
<a href="javascript:window.location='downloadServlet?param1=value1'">
    download
</a>

<!-- without JS -->
<a href="downloadServlet?param1=value1" >download</a>

2. Struts2 Framework: Akcja Pobieranie pliku jako załącznik

<!-- with JS -->
<a href="javascript:window.location='downloadAction.action?param1=value1'">
    download
</a>

<!-- without JS -->
<a href="downloadAction.action?param1=value1" >download</a>

Lepiej by było użyć <s:a> znacznika wskazującego OGNLdo URL utworzonego <s:url> znacznika:

<!-- without JS, with Struts tags: THE RIGHT WAY -->    
<s:url action="downloadAction.action" var="url">
    <s:param name="param1">value1</s:param>
</s:ulr>
<s:a href="%{url}" >download</s:a>

W powyższych przypadkach, musisz napisać nagłówek Content-Disposition do odpowiedzi , określając, że plik należy pobrać (attachment) i nie otwierane przez przeglądarkę (inline). Jeśli potrzebujesz , aby określić typ zawartości , możesz dodać nazwę i długość pliku (aby ułatwić przeglądarce rysowanie realistycznego paska postępu).

Na przykład podczas pobierania ZIP:

response.setContentType("application/zip");
response.addHeader("Content-Disposition", 
                   "attachment; filename=\"name of my file.zip\"");
response.setHeader("Content-Length", myFile.length()); // or myByte[].length...

Ze Struts2 (chyba że używasz akcji jako Servleta, na przykład hack do bezpośredniego przesyłania strumieniowego), nie musisz pisać bezpośrednio niczego do odpowiedzi; po prostu użyj strumienia Typ wyniku i konfigurowanie go w struts.xml będzie działał: przykład

<result name="success" type="stream">
   <param name="contentType">application/zip</param>
   <param name="contentDisposition">attachment;filename="${fileName}"</param>
   <param name="contentLength">${fileLength}</param>
</result>

3. Framework agnostic (/Struts2 framework): Servlet (/Action) otwierający plik wewnątrz przeglądarki

Jeśli chcesz otworzyć plik w przeglądarce, zamiast go pobierać, Content-disposition musi być ustawione na inline , ale celem nie może być bieżąca lokalizacja okna; musisz kierować się nowym oknem utworzonym przez javascript, <iframe> na stronie, lub nowe okno utworzone w locie z "omówionym" target= "_blank":

<!-- From a parent page into an IFrame without javascript -->   
<a href="downloadServlet?param1=value1" target="iFrameName">
    download
</a>

<!-- In a new window without javascript --> 
<a href="downloadServlet?param1=value1" target="_blank">
    download
</a>

<!-- In a new window with javascript -->    
<a href="javascript:window.open('downloadServlet?param1=value1');" >
    download
</a>

Stworzyłem małą funkcję jako rozwiązanie obejścia problemu (zainspirowane wtyczką @ JohnCulviner):

// creates iframe and form in it with hidden field,
// then submit form with provided data
// url - form url
// data - data to form field
// input_name - form hidden input name

function ajax_download(url, data, input_name) {
    var $iframe,
        iframe_doc,
        iframe_html;

    if (($iframe = $('#download_iframe')).length === 0) {
        $iframe = $("<iframe id='download_iframe'" +
                    " style='display: none' src='about:blank'></iframe>"
                   ).appendTo("body");
    }

    iframe_doc = $iframe[0].contentWindow || $iframe[0].contentDocument;
    if (iframe_doc.document) {
        iframe_doc = iframe_doc.document;
    }

    iframe_html = "<html><head></head><body><form method='POST' action='" +
                  url +"'>" +
                  "<input type=hidden name='" + input_name + "' value='" +
                  JSON.stringify(data) +"'/></form>" +
                  "</body></html>";

    iframe_doc.open();
    iframe_doc.write(iframe_html);
    $(iframe_doc).find('form').submit();
}

Demo z eventem click:

$('#someid').on('click', function() {
    ajax_download('/download.action', {'para1': 1, 'para2': 2}, 'dataname');
});

Ok, na podstawie kodu ndpu heres ulepszoną (chyba) wersję ajax_download; -

function ajax_download(url, data) {
    var $iframe,
        iframe_doc,
        iframe_html;

    if (($iframe = $('#download_iframe')).length === 0) {
        $iframe = $("<iframe id='download_iframe'" +
                    " style='display: none' src='about:blank'></iframe>"
                   ).appendTo("body");
    }

    iframe_doc = $iframe[0].contentWindow || $iframe[0].contentDocument;
    if (iframe_doc.document) {
        iframe_doc = iframe_doc.document;
    }

    iframe_html = "<html><head></head><body><form method='POST' action='" +
                  url +"'>" 

    Object.keys(data).forEach(function(key){
        iframe_html += "<input type='hidden' name='"+key+"' value='"+data[key]+"'>";

    });

        iframe_html +="</form></body></html>";

    iframe_doc.open();
    iframe_doc.write(iframe_html);
    $(iframe_doc).find('form').submit();
}

Użyj tego tak;-

$('#someid').on('click', function() {
    ajax_download('/download.action', {'para1': 1, 'para2': 2});
});

Params są wysyłane jako poprawne params post, tak jakby pochodziły z wejścia, a nie jako kodowany łańcuch json, jak w poprzednim przykładzie.

Zastrzeżenie: uważaj na możliwość zmiennego wtrysku w tych formach. Może być bezpieczniejszy sposób na zakodowanie tych zmiennych. Alternatywnie kontemplować ucieczkę.

Stanąłem przed tym samym problemem i z powodzeniem go rozwiązałem. Mój przypadek użycia jest taki.

"Wyślij dane JSON na serwer i odbierz plik excel. Ten plik excel jest tworzony przez serwer i zwracany jako odpowiedź do klienta. Pobierz tę odpowiedź jako plik o niestandardowej nazwie w przeglądarce "

$("#my-button").on("click", function(){

// Data to post
data = {
    ids: [1, 2, 3, 4, 5]
};

// Use XMLHttpRequest instead of Jquery $ajax
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    var a;
    if (xhttp.readyState === 4 && xhttp.status === 200) {
        // Trick for making downloadable link
        a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhttp.response);
        // Give filename you wish to download
        a.download = "test-file.xls";
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
    }
};
// Post data to URL which handles post request
xhttp.open("POST", excelDownloadUrl);
xhttp.setRequestHeader("Content-Type", "application/json");
// You should set responseType as blob for binary responses
xhttp.responseType = 'blob';
xhttp.send(JSON.stringify(data));
});

Powyższy fragment po prostu wykonuje

• umieszczanie tablicy jako JSON na serwerze przy użyciu XMLHttpRequest.
• Po pobraniu zawartości jako blob (binary), tworzymy adres URL do pobrania i dołączamy go do niewidocznego łącza "a", a następnie klikamy go. Poprosiłem o POST. Zamiast tego, można przejść do prostego dostać zbyt. Nie możemy pobrać Pliku przez Ajax, musimy użyć XMLHttpRequest.

Tutaj musimy starannie ustawić kilka rzeczy po stronie serwera. Ustawiłem kilka nagłówków w Pythonie Django HttpResponse. Musisz je odpowiednio ustawić, Jeśli używasz innych języków programowania.

# In python django code
response = HttpResponse(file_content, content_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")

Ponieważ pobieram tutaj xls (excel), dostosowałem contentType to above one. Musisz ustawić go zgodnie z typem pliku. Możesz użyć tej techniki, aby pobrać dowolny rodzaj plików.

Prosty sposób, aby przeglądarka pobrała plik, polega na wysłaniu żądania w ten sposób:

 function downloadFile(urlToSend) {
     var req = new XMLHttpRequest();
     req.open("GET", urlToSend, true);
     req.responseType = "blob";
     req.onload = function (event) {
         var blob = req.response;
         var fileName = req.getResponseHeader("fileName") //if you have the fileName header available
         var link=document.createElement('a');
         link.href=window.URL.createObjectURL(blob);
         link.download=fileName;
         link.click();
     };

     req.send();
 }

Otworzy się okno pobierania przeglądarki.

Oto co zrobiłem, czysty javascript i html. Nie testowałem go, ale to powinno działać we wszystkich przeglądarkach.

Funkcja Javascript

var iframe = document.createElement('iframe');
iframe.id = "IFRAMEID";
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = 'SERVERURL'+'?' + $.param($scope.filtro);
iframe.addEventListener("load", function () {
     console.log("FILE LOAD DONE.. Download should start now");
});

Używanie tylko komponentów, które są obsługiwane we wszystkich przeglądarkach bez dodatkowych biblioteki.

Oto Mój kod kontrolera JAVA Spring po stronie serwera.

@RequestMapping(value = "/rootto/my/xlsx", method = RequestMethod.GET)
public void downloadExcelFile(@RequestParam(value = "param1", required = false) String param1,
    HttpServletRequest request, HttpServletResponse response)
            throws ParseException {

    Workbook wb = service.getWorkbook(param1);
    if (wb != null) {
        try {
            String fileName = "myfile_" + sdf.format(new Date());
            response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
            response.setHeader("Content-disposition", "attachment; filename=\"" + fileName + ".xlsx\"");
            wb.write(response.getOutputStream());
            response.getOutputStream().close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    }

Dodanie kilku rzeczy do powyższej odpowiedzi do pobrania pliku

Poniżej znajduje się kod źródłowy Javy, który generuje tablicę bajtów

@RequestMapping(value = "/downloadReport", method = { RequestMethod.POST })
    public ResponseEntity<byte[]> downloadReport(
            @RequestBody final SomeObejct obj, HttpServletResponse response) throws Exception {

        OutputStream out = new ByteArrayOutputStream();
        // write something to output stream
        HttpHeaders respHeaders = new HttpHeaders();
        respHeaders.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        respHeaders.add("X-File-Name", name);
        ByteArrayOutputStream bos = (ByteArrayOutputStream) out;
        return new ResponseEntity<byte[]>(bos.toByteArray(), respHeaders, HttpStatus.CREATED);
    }

Teraz w kodzie javascript używając FileSaver.js, można pobrać plik z poniższym kodem

var json=angular.toJson("somejsobject");
var url=apiEndPoint+'some url';
var xhr = new XMLHttpRequest();
//headers('X-File-Name')
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 201) {
        var res = this.response;
        var fileName=this.getResponseHeader('X-File-Name');
        var data = new Blob([res]);
        saveAs(data, fileName); //this from FileSaver.js
    }
}    
xhr.open('POST', url);
xhr.setRequestHeader('Authorization','Bearer ' + token);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'arraybuffer';
xhr.send(json);

Powyższy plik zostanie pobrany

function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

W Rails robię to w ten sposób:

function download_file(file_id) {
  let url       = '/files/' + file_id + '/download_file';
    $.ajax({
    type: 'GET',
    url: url,
    processData: false,
    success: function (data) {
       window.location = url;
    },
    error: function (xhr) {
     console.log(' Error:  >>>> ' + JSON.stringify(xhr));
    }
   });
 }

Sztuką jest okno.lokalizacja part. Metoda kontrolera wygląda następująco:

# GET /files/{:id}/download_file/
def download_file
    send_file(@file.file,
          :disposition => 'attachment',
          :url_based_filename => false)
end

Ok więc tutaj jest kod roboczy podczas korzystania z MVC i otrzymujesz plik z kontrolera

Powiedzmy, że macierz bajtów deklarujesz i wypełniasz, jedyne co musisz zrobić, to użyć funkcji File (używając System.Www.Mvc)

byte[] bytes = .... insert your bytes in the array
return File(bytes, System.Net.Mime.MediaTypeNames.Application.Octet, "nameoffile.exe");

A następnie w tym samym kontrolerze dodaj 2 Funkcje

protected override void OnResultExecuting(ResultExecutingContext context)
    {
        CheckAndHandleFileResult(context);

        base.OnResultExecuting(context);
    }

    private const string FILE_DOWNLOAD_COOKIE_NAME = "fileDownload";

    /// <summary>
    /// If the current response is a FileResult (an MVC base class for files) then write a
    /// cookie to inform jquery.fileDownload that a successful file download has occured
    /// </summary>
    /// <param name="context"></param>
    private void CheckAndHandleFileResult(ResultExecutingContext context)
    {
        if (context.Result is FileResult)
            //jquery.fileDownload uses this cookie to determine that a file download has completed successfully
            Response.SetCookie(new HttpCookie(FILE_DOWNLOAD_COOKIE_NAME, "true") { Path = "/" });
        else
            //ensure that the cookie is removed in case someone did a file download without using jquery.fileDownload
            if (Request.Cookies[FILE_DOWNLOAD_COOKIE_NAME] != null)
                Response.Cookies[FILE_DOWNLOAD_COOKIE_NAME].Expires = DateTime.Now.AddYears(-1);
    }

A następnie będziesz mógł zadzwonić do kontrolera, aby pobrać i uzyskać wywołanie zwrotne" sukces "lub" porażka "

$.fileDownload(mvcUrl('name of the controller'), {
            httpMethod: 'POST',
            successCallback: function (url) {
            //insert success code

            },
            failCallback: function (html, url) {
            //insert fail code
            }
        });

Jeśli chcesz użyć pliku jQuery do pobrania, zwróć uwagę na to dla IE. Musisz zresetować odpowiedź, albo nie zostanie ona pobrana

    //The IE will only work if you reset response
    getServletResponse().reset();
    //The jquery.fileDownload needs a cookie be set
    getServletResponse().setHeader("Set-Cookie", "fileDownload=true; path=/");
    //Do the reset of your action create InputStream and return

Twoja akcja może zaimplementować ServletResponseAware, Aby uzyskać dostęp getServletResponse()

Znalazłem poprawkę, że chociaż nie jest faktycznie za pomocą ajax to pozwala na korzystanie z połączenia javascript, aby zażądać pobrania, a następnie uzyskać oddzwonienie, gdy pobieranie rzeczywiście się rozpoczyna. Znalazłem to pomocne, jeśli link uruchamia skrypt po stronie serwera, który zajmuje trochę czasu, aby skomponować plik przed wysłaniem go. możesz więc ostrzec ich, że przetwarza, a gdy w końcu wyśle plik, usuń to powiadomienie o przetwarzaniu. dlatego chciałem spróbować załadować plik przez ajax, aby rozpocząć dzięki temu mogę mieć zdarzenie, gdy żądany jest plik, a inne, gdy faktycznie zaczyna się pobieranie.

Js na pierwszej stronie

function expdone()
{
    document.getElementById('exportdiv').style.display='none';
}
function expgo()
{
   document.getElementById('exportdiv').style.display='block';
   document.getElementById('exportif').src='test2.php?arguments=data';
}

Iframe

<div id="exportdiv" style="display:none;">
<img src="loader.gif"><br><h1>Generating Report</h1>
<iframe id="exportif" src="" style="width: 1px;height: 1px; border:0px;"></iframe>
</div>

Następnie drugi plik:

<!DOCTYPE html>
<html>
<head>
<script>
function expdone()
{
    window.parent.expdone();
}
</script>
</head>
<body>
<iframe id="exportif" src="<?php echo "http://10.192.37.211/npdtracker/exportthismonth.php?arguments=".$_GET["arguments"]; ?>"></iframe>
<script>document.getElementById('exportif').onload= expdone;</script>
</body></html>

Myślę, że jest sposób, aby odczytać dane za pomocą js, więc wtedy php nie będzie potrzebne. ale nie wiem to od ręki i serwer używam obsługuje php więc to działa dla mnie. pomyślałem, że się tym podzielę, gdyby komuś to pomogło.

Jest pewne, że nie można tego zrobić przez wywołanie Ajax.

Istnieje jednak obejście.

Kroki:

Jeśli używasz formularza.submit () aby pobrać plik, możesz:

1. Utwórz połączenie ajax z Klienta na serwer i zapisz strumień plików wewnątrz sesji.
2. gdy "sukces" zostanie zwrócony z serwera, zadzwoń do formularza.submit() służy do przesyłania strumieniowego strumienia plików przechowywanego w sesji.

Jest to pomocne w przypadku, gdy chcesz zdecydować, czy plik ma zostać pobrany po wykonaniu formularza.submit (), np.: może się zdarzyć, że na formularzusubmit (), wyjątek występuje po stronie serwera i zamiast awarii, może być konieczne wyświetlenie niestandardowej wiadomości po stronie klienta, w takim przypadku Ta implementacja może pomóc.