Pobierz plik przez jQuery.Ajax

Mam działanie Struts2 po stronie serwera do pobierania plików.

<action name="download" class="com.xxx.DownAction">
    <result name="success" type="stream">
        <param name="contentType">text/plain</param>
        <param name="inputName">imageStream</param>
        <param name="contentDisposition">attachment;filename={fileName}</param>
        <param name="bufferSize">1024</param>
    </result>
</action>

Jednak gdy wywołuję akcję za pomocą jQuery:

$.post(
  "/download.action",{
    para1:value1,
    para2:value2
    ....
  },function(data){
      console.info(data);
   }
);

w Firebug widzę, że dane są pobierane za pomocą strumienia binarnego . Zastanawiam się, jak otworzyć okno pobierania pliku, w którym użytkownik może zapisać plik lokalnie?

Aktualizacja nowoczesnych przeglądarek 2019

Takie podejście polecam teraz z kilkoma zastrzeżeniami:

• Wymagana jest stosunkowo nowoczesna przeglądarka
• Jeśli plik ma być bardzo duży , prawdopodobnie powinieneś zrobić coś podobnego do oryginalnego podejścia (iframe i cookie), ponieważ niektóre z poniższych operacji mogą prawdopodobnie zajmować pamięć systemową co najmniej tak dużą, jak pobierany plik i / lub inny interesujący procesor skutki uboczne.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

2012 Oryginalne podejście oparte na jQuery / iframe / Cookie

Bluish ma w tym całkowitą rację, nie można tego zrobić przez Ajax, ponieważ JavaScript nie może zapisywać plików bezpośrednio na komputerze użytkownika (ze względów bezpieczeństwa). Niestety, wskazując główne okno adresu URL na pobierany plik oznacza, że ​​masz niewielką kontrolę nad tym, co odczuwa użytkownik w momencie pobierania pliku.

Stworzyłem jQuery File Download, który pozwala na uzyskanie „podobnego do Ajaxa” pobierania plików wraz z wywołaniami zwrotnymi OnSuccess i OnFailure, aby zapewnić lepszą obsługę. Spójrz na mój post na blogu na temat typowego problemu, który rozwiązuje wtyczka, i niektóre sposoby jej używania, a także demonstrację pobierania pliku jQuery w akcji . Oto źródło

Oto prosta wersja demonstracyjna przypadku użycia źródła wtyczek z obietnicami. Strona demonstracyjna zawiera również wiele innych przykładów „lepszego UX”.

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

W zależności od przeglądarek, które chcesz obsługiwać, możesz użyć https://github.com/eligrey/FileSaver.js/, co pozwala na bardziej jednoznaczną kontrolę niż metoda pobierania pliku jQuery.

Nikt nie opublikował tego rozwiązania @ Pekka ... więc opublikuję to. To może komuś pomóc.

Nie musisz tego robić przez Ajax. Po prostu użyj

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

Możesz z HTML5

Uwaga: Zwracane dane pliku MUSZĄ być zakodowane w standardzie base64, ponieważ nie można kodować danych binarnych JSON

W mojej AJAXodpowiedzi mam strukturę danych, która wygląda następująco:

{
    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 przez 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 wzięta stąd 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});
};

Jest to dobre, jeśli serwer wysyła dane do zapisania. Jednak nie do końca opracowałem sposób implementacji kreacji zastępczej HTML4

1. Agnostyk ramowy: pobieranie pliku serwletu jako załącznika

<!-- 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 pobiera plik 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łoby użyć <s:a>tagu wskazującego OGNL na adres URL utworzony za pomocą <s:url>tagu:

<!-- 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 w odpowiedzi , określając, że plik musi zostać pobrany ( attachment), a nie otwarty przez przeglądarkę ( inline). Ci potrzebne do określenia typu zawartości też, a może chcesz dodać nazwę pliku i długość (w pomocy przeglądarki rysunek realistyczny progressbar).

Na przykład podczas pobierania pliku 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...

Dzięki Struts2 (chyba że używasz akcji jako serwletu, na przykład włamania do bezpośredniego przesyłania strumieniowego ), nie musisz pisać niczego bezpośrednio w odpowiedzi; wystarczy użyć typu wyniku Stream i skonfigurowanie 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 (framework / Struts2): otwieranie pliku serwletu (/ Action) w przeglądarce

Jeśli chcesz otworzyć plik w przeglądarce, zamiast go pobierać, ustawianie zawartości musi być ustawione na wartość wbudowaną , ale celem nie może być bieżąca lokalizacja okna; musisz kierować reklamy do nowego okna utworzonego przez javascript, <iframe>na stronie lub nowego okna utworzonego w locie za pomocą „przedyskutowanego” celu = „_ puste”:

<!-- 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>

Prostym sposobem, aby przeglądarka pobierała plik, jest takie żądanie:

 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();
 }

Spowoduje to otwarcie okna pobierania przeglądarki.

Stworzyłem niewiele funkcji jako rozwiązanie obejścia (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 ze zdarzeniem kliknięcia:

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

Napotkałem ten sam problem i udało mi się go rozwiązać. Oto mój przypadek użycia.

„ Opublikuj dane JSON na serwerze i otrzymaj plik programu Excel. Ten plik programu Excel jest tworzony przez serwer i zwracany w odpowiedzi na 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 kodu wykonuje tylko następujące czynności

• Publikowanie tablicy jako JSON na serwerze za pomocą XMLHttpRequest.
• Po pobraniu treści jako obiektu blob (plik binarny) tworzymy adres URL do pobrania i dołączamy go do niewidocznego linku „a”, a następnie klikamy go. Zrobiłem tutaj żądanie POST. Zamiast tego możesz wybrać prosty GET. Nie możemy pobrać pliku przez Ajax, musimy użyć XMLHttpRequest.

Tutaj musimy dokładnie ustawić kilka rzeczy po stronie serwera. Ustawiłem kilka nagłówków w Python Django HttpResponse. Musisz odpowiednio je 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ż tutaj pobieram xls (excel), dostosowałem contentType do ponad jednego. Musisz ustawić go zgodnie z typem pliku. Możesz użyć tej techniki do pobierania dowolnego rodzaju plików.

Ok, w oparciu o kod ndpu, oto ulepszona (jak sądzę) wersja 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 w ten sposób; -

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

Parametry są wysyłane jako odpowiednie parametry pocztowe, jakby pochodziły z danych wejściowych, a nie jako ciąg zakodowany w formacie json, jak w poprzednim przykładzie.

PRZESTROGA: Uważaj na możliwość zmiennego wstrzykiwania tych form. Może istnieć bezpieczniejszy sposób kodowania tych zmiennych. Ewentualnie rozważ ich ucieczkę.

Oto co zrobiłem, czysty JavaScript i HTML. Nie przetestowałem tego, ale powinno to 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 składników obsługiwanych we wszystkich przeglądarkach bez dodatkowych bibliotek.

Oto kod kontrolera JAVA Spring po stronie mojego 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();
        }
    }
    }

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 window.location część. 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

Posługiwać się window.open https://developer.mozilla.org/en-US/docs/Web/API/Window/open

Na przykład możesz umieścić ten wiersz kodu w module obsługi kliknięć:

window.open('/file.txt', '_blank');

Otworzy się nowa karta (z powodu nazwy okna „_blank”) i ta karta otworzy adres URL.

Twój kod po stronie serwera powinien również mieć coś takiego:

res.set('Content-Disposition', 'attachment; filename=file.txt');

W ten sposób przeglądarka powinna poprosić użytkownika o zapisanie pliku na dysku, zamiast tylko pokazywania mu pliku. Spowoduje to również automatyczne zamknięcie właśnie otwartej karty.

Próbuję pobrać plik CSV, a następnie zrobić coś po zakończeniu pobierania. Więc muszę zaimplementować odpowiednią callbackfunkcję.

Używanie window.location="..."nie jest dobrym pomysłem, ponieważ nie mogę obsługiwać programu po zakończeniu pobierania. Coś w tym stylu, zmień nagłówek, aby nie był to dobry pomysł.

fetchjest dobrą alternatywą, jednak nie obsługuje IE 11 . I window.URL.createObjectURLnie może obsługiwać IE 11. Możesz to sprawdzić .

To jest mój kod, jest podobny do kodu Shahrukh Alam. Ale powinieneś uważać, aby nie window.URL.createObjectURLdoprowadzić do wycieków pamięci. Można odnieść to . Po nadejściu odpowiedzi dane zostaną zapisane w pamięci przeglądarki. Więc zanim klikniesz alink, plik został pobrany. Oznacza to, że po pobraniu możesz zrobić wszystko.

$.ajax({
    url: 'your download url',
    type: 'GET',
}).done(function (data, textStatus, request) {
    // csv => Blob
    var blob = new Blob([data]);

    // the file name from server.
    var fileName = request.getResponseHeader('fileName');

    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
    window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else { // for others
    var url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);

    //Do something after download 
    ...

    }
}).then(after_download)
}

Jak pobrać plik po otrzymaniu go przez AJAX

Jest to wygodne, gdy plik jest tworzony przez długi czas i musisz pokazać PRELOADER

Przykład podczas przesyłania formularza internetowego:

<script>
$(function () {
    $('form').submit(function () {
        $('#loader').show();
        $.ajax({
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'binary',
            xhrFields: {
                'responseType': 'blob'
            },
            success: function(data, status, xhr) {
                $('#loader').hide();
                // if(data.type.indexOf('text/html') != -1){//If instead of a file you get an error page
                //     var reader = new FileReader();
                //     reader.readAsText(data);
                //     reader.onload = function() {alert(reader.result);};
                //     return;
                // }
                var link = document.createElement('a'),
                    filename = 'file.xlsx';
                // if(xhr.getResponseHeader('Content-Disposition')){//filename 
                //     filename = xhr.getResponseHeader('Content-Disposition');
                //     filename=filename.match(/filename="(.*?)"/)[1];
                //     filename=decodeURIComponent(escape(filename));
                // }
                link.href = URL.createObjectURL(data);
                link.download = filename;
                link.click();
            }
        });
        return false;
    });
});
</script>

Opcjonalne funkcje zostały zakomentowane w celu uproszczenia przykładu.

Nie ma potrzeby tworzenia plików tymczasowych na serwerze.

W jQuery v2.2.4 OK. W starej wersji wystąpi błąd:

Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'blob').

Dodanie jeszcze kilku rzeczy do powyższej odpowiedzi na pobranie pliku

Poniżej znajduje się kod java spring, który generuje bajt Array

@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 za pomocą FileSaver.js, możesz 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ższe spowoduje pobranie pliku

Ok, więc oto działający kod podczas korzystania z MVC i pobierania pliku z kontrolera

powiedzmy, że masz tablicę bajtów do zadeklarowania i wypełnienia, jedyne, co musisz zrobić, to użyć funkcji File (using System.Web.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 te 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ć oddzwonienie „sukces” lub „niepowodzenie”

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

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

Znalazłem poprawkę, która chociaż tak naprawdę nie używa ajax, pozwala na użycie wywołania javascript w celu zażądania pobrania, a następnie otrzymania oddzwonienia, gdy pobieranie faktycznie się rozpocznie. Uważam to za pomocne, jeśli łącze uruchamia skrypt po stronie serwera, który zajmuje trochę czasu, aby skomponować plik przed wysłaniem. abyś mógł ostrzec ich o przetwarzaniu, a następnie, kiedy w końcu wyśle ​​plik, usuń powiadomienie o przetwarzaniu. dlatego chciałem spróbować załadować plik za pośrednictwem ajax, aby na początku zdarzyć się zdarzenie, gdy plik zostanie zażądany, a inne, gdy rozpocznie 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 istnieje sposób na odczytanie danych za pomocą js, więc nie byłoby potrzebne php. ale nie wiem tego od ręki, a serwer, którego używam, obsługuje PHP, więc to działa dla mnie. pomyślałem, że podzielę się tym na wypadek, gdyby to komukolwiek pomogło

Jeśli chcesz skorzystać z pobierania plików jQuery, zwróć uwagę na to dla IE. Musisz zresetować odpowiedź, aby nie została 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

Twoje działanie można wdrożyć, ServletResponseAware aby uzyskać dostępgetServletResponse()

Pewne jest, że nie można tego zrobić za pośrednictwem połączenia Ajax.

Istnieje jednak obejście.

Kroki :

Jeśli używasz form.submit () do pobierania pliku, możesz:

1. Utwórz wywołanie ajax od klienta do serwera i zapisz strumień plików w sesji.
2. Po zwróceniu „sukcesu” z serwera, wywołaj form.submit (), aby po prostu przesłać strumień plików przechowywanych w sesji.

Jest to pomocne w przypadku, gdy chcesz zdecydować, czy plik ma zostać pobrany po utworzeniu form.submit (), np .: może wystąpić przypadek, w którym w formularzu form.submit () występuje wyjątek po stronie serwera, a zamiast tego awarii, może być konieczne wyświetlenie niestandardowego komunikatu po stronie klienta, w takim przypadku ta implementacja może pomóc.

istnieje inne rozwiązanie, aby pobrać stronę internetową w ajax. Mam jednak na myśli stronę, którą najpierw trzeba przetworzyć, a następnie pobrać.

Najpierw musisz oddzielić przetwarzanie strony od pobierania wyników.

1) Tylko wywołania strony są wykonywane w wywołaniu ajax.

$ .post („CalculusPage.php”, {calcusFunction: true, ID: 29, data1: „a”, data2: „b”},

       funkcja (dane, status) 
       {
            if (status == „sukces”) 
            {
                / * 2) W odpowiedzi pobierana jest strona wykorzystująca poprzednie obliczenia. Na przykład może to być strona, która drukuje wyniki tabeli obliczonej w wywołaniu ajax. * /
                window.location.href = DownloadPage.php + "? ID =" + 29;
            }               
       }
);

// Na przykład: w CalculusPage.php

    if (! pusty ($ _ POST [„rachunek funkcji”])) 
    {
        $ ID = $ _POST [„ID”];

        $ query = "INSERT INTO ExamplePage (data1, data2) VALUES ('". $ _ POST ["data1"]. "'," ". $ _ POST [" data2 "]." ') WHERE id = ". $ ID;
        ...
    }

// Na przykład: w DownloadPage.php

    $ ID = $ _GET ["ID"];

    $ sede = "SELECT * FROM ExamplePage WHERE id =". $ ID;
    ...

    $ filename = "Export_Data.xls";
    nagłówek („Content-Type: application / vnd.ms-excel”);
    nagłówek („Content-Disposition: inline; filename = $ filename”);

    ...

Mam nadzieję, że to rozwiązanie może być przydatne dla wielu osób, tak jak było dla mnie.

The HTML Code:-

'<button type="button" id="GetFile">Get File!</button>'


The jQuery Code:-

'$('#GetFile').on('click', function () {
    $.ajax({
        url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/172905/test.pdf',
        method: 'GET',
        xhrFields: {
            responseType: 'blob'
        },
        success: function (data) {
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(data);
            a.href = url;
            a.download = 'myfile.pdf';
            document.body.append(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
        }
    });
});'

To działa tak dobrze w każdej przeglądarce (używam rdzenia asp.net)

            function onDownload() {

  const api = '@Url.Action("myaction", "mycontroller")'; 
  var form = new FormData(document.getElementById('form1'));

  fetch(api, { body: form, method: "POST"})
      .then(resp => resp.blob())
      .then(blob => {
          const url = window.URL.createObjectURL(blob);
        $('#linkdownload').attr('download', 'Attachement.zip');
          $('#linkdownload').attr("href", url);
          $('#linkdownload')
              .fadeIn(3000,
                  function() { });

      })
      .catch(() => alert('An error occurred'));



}

 
 <button type="button" onclick="onDownload()" class="btn btn-primary btn-sm">Click to Process Files</button>
 
 
 
 <a role="button" href="#" style="display: none" class="btn btn-sm btn-secondary" id="linkdownload">Click to download Attachments</a>
 
 
 <form asp-controller="mycontroller" asp-action="myaction" id="form1"></form>
 
 

        function onDownload() {
            const api = '@Url.Action("myaction", "mycontroller")'; 
            //form1 is your id form, and to get data content of form
            var form = new FormData(document.getElementById('form1'));

            fetch(api, { body: form, method: "POST"})
                .then(resp => resp.blob())
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    $('#linkdownload').attr('download', 'Attachments.zip');
                    $('#linkdownload').attr("href", url);
                    $('#linkdownload')
                        .fadeIn(3000,
                            function() {

                            });
                })
                .catch(() => alert('An error occurred'));                 

        }

Długo walczyłem z tym problemem. Wreszcie zaproponowana tutaj elegancka biblioteka zewnętrzna pomogła mi.