Pobierz i otwórz plik PDF za pomocą Ajax

Mam klasę akcji, która generuje plik PDF. contentTypeJest ustawiony prawidłowo.

public class MyAction extends ActionSupport 
{
   public String execute() {
    ...
    ...
    File report = signedPdfExporter.generateReport(xyzData, props);

    inputStream = new FileInputStream(report);
    contentDisposition = "attachment=\"" + report.getName() + "\"";
    contentType = "application/pdf";
    return SUCCESS;
   }
}

Wołam to action przez połączenie Ajax. Nie znam sposobu dostarczenia tego strumienia do przeglądarki. Próbowałem kilku rzeczy, ale nic nie działało.

$.ajax({
    type: "POST",
    url: url,
    data: wireIdList,
    cache: false,
    success: function(response)
    {
        alert('got response');
        window.open(response);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) 
    {
        alert('Error occurred while opening fax template' 
              + getAjaxErrorString(textStatus, errorThrown));
    }
});

Powyższe podaje błąd:

Twoja przeglądarka wysłała żądanie, którego ten serwer nie mógł zrozumieć.

Niekoniecznie potrzebujesz do tego Ajaksu. Wystarczy <a>link, jeśli ustawisz opcję content-dispositionna attachmentw kodzie po stronie serwera. W ten sposób strona nadrzędna pozostanie otwarta, jeśli to był twój główny problem (dlaczego niepotrzebnie wybrałbyś do tego Ajax?). Poza tym nie ma sposobu, aby ładnie sobie z tym poradzić, asynchronicznie. PDF nie zawiera danych znakowych. To dane binarne. Nie możesz robić takich rzeczy $(element).load(). Chcesz użyć do tego zupełnie nowego żądania. Bo to <a href="pdfservlet/filename.pdf">pdf</a>jest idealne.

Aby bardziej pomóc Ci z kodem po stronie serwera, musisz powiedzieć więcej o używanym języku i zamieścić fragmenty prób kodu.

Oto jak to działa

$.ajax({
  url: '<URL_TO_FILE>',
  success: function(data) {
    var blob=new Blob([data]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="<FILENAME_TO_SAVE_WITH_EXTENSION>";
    link.click();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Zaktualizowana odpowiedź za pomocą download.js

$.ajax({
  url: '<URL_TO_FILE>',
  success: download.bind(true, "<FILENAME_TO_SAVE_WITH_EXTENSION>", "<FILE_MIME_TYPE>")
});

Nie wydaje mi się, żeby którakolwiek z wcześniejszych odpowiedzi wskazywała na problem z oryginalnym plakatem. Wszyscy zakładają żądanie GET, podczas gdy plakat próbował POST dane i pobrać w odpowiedzi.

W trakcie poszukiwania lepszej odpowiedzi znaleźliśmy tę wtyczkę jQuery do pobierania plików w stylu Ajax .

W swoim „sercu” tworzy „tymczasowy” formularz HTML zawierający podane dane jako pola wejściowe. Ten formularz jest dołączany do dokumentu i publikowany pod żądanym adresem URL. Zaraz po tym formularz jest ponownie usuwany:

jQuery('<form action="'+ url +'" method="'+ (method||'post') +'">'+inputs+'</form>')
    .appendTo('body').submit().remove()

Odpowiedź Update Mayur wygląda całkiem obiecująco i bardzo prosto w porównaniu z wtyczką jQuery, o której mówiłem.

W ten sposób rozwiązuję ten problem.
Odpowiedź Jonathana Amenda w tym poście bardzo mi pomogła.
Poniższy przykład jest uproszczony.

Aby uzyskać więcej informacji, powyższy kod źródłowy może pobrać plik przy użyciu żądania JQuery Ajax (GET, POST, PUT itp . ) . Pomaga również w przesyłaniu parametrów jako JSON i zmianie typu zawartości na application / json (moje domyślne) .

Html źródło:

<form method="POST">
    <input type="text" name="startDate"/>
    <input type="text" name="endDate"/>
    <input type="text" name="startDate"/>
    <select name="reportTimeDetail">
        <option value="1">1</option>
    </select>
    <button type="submit"> Submit</button>
</form>  

Prosty formularz z dwoma tekstami wejściowymi, jednym przyciskiem wyboru i przyciskiem.

Strona javascript źródło:

<script type="text/javascript" src="JQuery 1.11.0 link"></script>
<script type="text/javascript">
    // File Download on form submition.
    $(document).on("ready", function(){
        $("form button").on("click", function (event) {
            event.stopPropagation(); // Do not propagate the event.

            // Create an object that will manage to download the file.
            new AjaxDownloadFile({
                url: "url that returns a file",
                data: JSON.stringify($("form").serializeObject())
            });

            return false; // Do not submit the form.
        });
    });
</script>  

Proste wydarzenie po kliknięciu przycisku. Tworzy obiekt AjaxDownloadFile. Źródło klasy AjaxDownloadFile znajduje się poniżej.

Klasa AjaxDownloadFile źródło:

var AjaxDownloadFile = function (configurationSettings) {
    // Standard settings.
    this.settings = {
        // JQuery AJAX default attributes.
        url: "",
        type: "POST",
        headers: {
            "Content-Type": "application/json; charset=UTF-8"
        },
        data: {},
        // Custom events.
        onSuccessStart: function (response, status, xhr, self) {
        },
        onSuccessFinish: function (response, status, xhr, self, filename) {
        },
        onErrorOccured: function (response, status, xhr, self) {
        }
    };
    this.download = function () {
        var self = this;
        $.ajax({
            type: this.settings.type,
            url: this.settings.url,
            headers: this.settings.headers,
            data: this.settings.data,
            success: function (response, status, xhr) {
                // Start custom event.
                self.settings.onSuccessStart(response, status, xhr, self);

                // Check if a filename is existing on the response headers.
                var filename = "";
                var disposition = xhr.getResponseHeader("Content-Disposition");
                if (disposition && disposition.indexOf("attachment") !== -1) {
                    var filenameRegex = /filename[^;=\n]*=(([""]).*?\2|[^;\n]*)/;
                    var matches = filenameRegex.exec(disposition);
                    if (matches != null && matches[1])
                        filename = matches[1].replace(/[""]/g, "");
                }

                var type = xhr.getResponseHeader("Content-Type");
                var blob = new Blob([response], {type: type});

                if (typeof window.navigator.msSaveBlob !== "undefined") {
                    // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed.
                    window.navigator.msSaveBlob(blob, filename);
                } else {
                    var URL = window.URL || window.webkitURL;
                    var downloadUrl = URL.createObjectURL(blob);

                    if (filename) {
                        // Use HTML5 a[download] attribute to specify filename.
                        var a = document.createElement("a");
                        // Safari doesn"t support this yet.
                        if (typeof a.download === "undefined") {
                            window.location = downloadUrl;
                        } else {
                            a.href = downloadUrl;
                            a.download = filename;
                            document.body.appendChild(a);
                            a.click();
                        }
                    } else {
                        window.location = downloadUrl;
                    }

                    setTimeout(function () {
                        URL.revokeObjectURL(downloadUrl);
                    }, 100); // Cleanup
                }

                // Final custom event.
                self.settings.onSuccessFinish(response, status, xhr, self, filename);
            },
            error: function (response, status, xhr) {
                // Custom event to handle the error.
                self.settings.onErrorOccured(response, status, xhr, self);
            }
        });
    };
    // Constructor.
    {
        // Merge settings.
        $.extend(this.settings, configurationSettings);
        // Make the request.
        this.download();
    }
};

Stworzyłem tę klasę, aby dodać ją do mojej biblioteki JS. Jest wielokrotnego użytku. Mam nadzieję, że to pomoże.

U mnie zadziałał następujący kod, który pobiera funkcja serwera File(memoryStream.GetBuffer(), "application/pdf", "fileName.pdf");:

$http.get( fullUrl, { responseType: 'arraybuffer' })
            .success(function (response) {
                var blob = new Blob([response], { type: 'application/pdf' });

                if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                    window.navigator.msSaveOrOpenBlob(blob); // for IE
                }
                else {
                    var fileURL = URL.createObjectURL(blob);
                    var newWin = window.open(fileURL);
                    newWin.focus();
                    newWin.reload();
                }
});

Możesz użyć tej wtyczki, która tworzy formularz i przesyła go, a następnie usuwa ze strony.

jQuery.download = function(url, data, method) {
    //url and data options required
    if (url && data) {
        //data can be string of parameters or array/object
        data = typeof data == 'string' ? data : jQuery.param(data);
        //split params into form inputs
        var inputs = '';
        jQuery.each(data.split('&'), function() {
            var pair = this.split('=');
            inputs += '<input type="hidden" name="' + pair[0] +
                '" value="' + pair[1] + '" />';
        });
        //send request
        jQuery('<form action="' + url +
                '" method="' + (method || 'post') + '">' + inputs + '</form>')
            .appendTo('body').submit().remove();
    };
};


$.download(
    '/export.php',
    'filename=mySpreadsheet&format=xls&content=' + spreadsheetData
);

To zadziałało dla mnie. Znalazłem tę wtyczkę tutaj

Poniższy kod zadziałał dla mnie

//Parameter to be passed
var data = 'reportid=R3823&isSQL=1&filter=[]';
var xhr = new XMLHttpRequest();
xhr.open("POST", "Reporting.jsp"); //url.It can pdf file path
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.responseType = "blob";
xhr.onload = function () {
    if (this.status === 200) {
        var blob = new Blob([xhr.response]);
        const url = window.URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = 'myFile.pdf';
        a.click();
        setTimeout(function () {
            // For Firefox it is necessary to delay revoking the ObjectURL
            window.URL.revokeObjectURL(data)
                , 100
        })
    }
};
xhr.send(data);

Aby rozwiązać problem z pustym plikiem PDF w żądaniu pocztowym, aby uzyskać dane strumieniowe, takie jak PDF, musimy dodać typ odpowiedzi jako „bufor tablicy” lub „blob” w żądaniu

$.ajax({
  url: '<URL>',
  type: "POST",
  dataType: 'arraybuffer',
  success: function(data) {
    let blob = new Blob([data], {type: 'arraybuffer'});
    let link = document.createElement('a');
    let objectURL = window.URL.createObjectURL(blob);
    link.href = objectURL;
    link.target = '_self';
    link.download = "fileName.pdf";
    (document.body || document.documentElement).appendChild(link);
    link.click();
    setTimeout(()=>{
        window.URL.revokeObjectURL(objectURL);
        link.remove();
    }, 100);
  }
});

Jeśli chodzi o odpowiedź udzieloną przez Mayura Padshalę, jest to poprawna logika pobierania pliku PDF przez ajax, ale jak inni podają w komentarzach, to rozwiązanie faktycznie pobiera pusty plik PDF.

Przyczyna tego jest wyjaśniona w zaakceptowanej odpowiedzi na to pytanie : jQuery ma pewne problemy z ładowaniem danych binarnych przy użyciu żądań AJAX, ponieważ nie implementuje jeszcze niektórych funkcji HTML5 XHR v2, zobacz tę prośbę o ulepszenie i tę dyskusję .

Więc użycie HTMLHTTPRequestkodu powinno wyglądać tak:

var req = new XMLHttpRequest();
req.open("POST", "URL", true);
req.responseType = "blob";
req.onload = function (event) {
    var blob = req.response;
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="name_for_the_file_to_save_with_extention";
    link.click();
}

utwórz ukrytą ramkę iframe, a następnie w swoim kodzie Ajax powyżej:

URL: document.getElementById('myiframeid').src = your_server_side_url ,

i usuń window.open(response);

Ten fragment kodu jest przeznaczony dla użytkowników angular js, którzy napotkają ten sam problem. Należy zauważyć, że plik odpowiedzi jest pobierany przy użyciu zaprogramowanego zdarzenia kliknięcia. W tym przypadku nagłówki zostały wysłane przez serwer zawierający nazwę pliku i zawartość / typ.

$http({
    method: 'POST', 
    url: 'DownloadAttachment_URL',
    data: { 'fileRef': 'filename.pdf' }, //I'm sending filename as a param
    headers: { 'Authorization': $localStorage.jwt === undefined ? jwt : $localStorage.jwt },
    responseType: 'arraybuffer',
}).success(function (data, status, headers, config) {
    headers = headers();
    var filename = headers['x-filename'];
    var contentType = headers['content-type'];
    var linkElement = document.createElement('a');
    try {
        var blob = new Blob([data], { type: contentType });
        var url = window.URL.createObjectURL(blob);

        linkElement.setAttribute('href', url);
        linkElement.setAttribute("download", filename);

        var clickEvent = new MouseEvent("click", {
            "view": window,
            "bubbles": true,
            "cancelable": false
        });
        linkElement.dispatchEvent(clickEvent);
    } catch (ex) {
        console.log(ex);
    }
}).error(function (data, status, headers, config) {
}).finally(function () {

});

Czy musisz to zrobić z Ajaxem? Czy nie mogłaby być możliwość załadowania go w ramce iframe?

Mam nadzieję, że pozwoli to zaoszczędzić kilka godzin i uniknąć bólu głowy. Zajęło mi trochę czasu, zanim to rozgryzłem, ale wykonanie zwykłego żądania $ .ajax () zrujnowało mój plik PDF, podczas gdy żądanie go przez pasek adresu działało idealnie. Rozwiązanie było następujące:

Dołącz download.js: http://danml.com/download.html

Następnie użyj XMLHttpRequest zamiast żądania $ .ajax ().

    var ajax = new XMLHttpRequest(); 

    ajax.open("GET", '/Admin/GetPdf' + id, true); 
    ajax.onreadystatechange = function(data) { 
        if (this.readyState == 4)
        {
            if (this.status == 200)
            {
                download(this.response, "report.pdf", "application/pdf");

            }
            else if (this.responseText != "")
            {
                alert(this.responseText);
            }
        }
        else if (this.readyState == 2)
        {
            if (this.status == 200)
            {
                this.responseType = "blob";
            }
            else
            {
                this.responseType = "text";
            }
        }
    };

    ajax.send(null);

Jeśli musisz pracować ze strumieniem plików (więc nie ma fizycznie zapisanego pliku PDF), tak jak my, i chcesz pobrać plik PDF bez ponownego ładowania strony, działa dla nas następująca funkcja:

HTML

<div id="download-helper-hidden-container" style="display:none">
     <form id="download-helper-form" target="pdf-download-output" method="post">
            <input type="hidden" name="downloadHelperTransferData" id="downloadHelperTransferData" />
     </form>
     <iframe id="pdf-helper-output" name="pdf-download-output"></iframe>
</div>

Javascript

var form = document.getElementById('download-helper-form');
$("#downloadHelperTransferData").val(transferData);
form.action = "ServerSideFunctionWhichWritesPdfBytesToResponse";
form.submit();

Ze względu na to, że target = "pdf-download-output" , odpowiedź jest zapisywana w ramce iframe i dlatego nie jest wykonywane ponowne ładowanie strony, ale strumień odpowiedzi pdf jest wysyłany do przeglądarki jako plik do pobrania.