Baixe e abra o arquivo PDF usando Ajax

Tenho uma classe de ação que gera um PDF. O contentTypeestá definido corretamente.

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

Eu chamo isso action por meio de uma chamada Ajax. Não sei como entregar este stream ao navegador. Tentei algumas coisas, mas nada funcionou.

$.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));
    }
});

O acima dá o erro:

Seu navegador enviou uma solicitação que este servidor não conseguiu entender.

Você não precisa necessariamente do Ajax para isso. Apenas um <a>link é suficiente se você definir content-dispositioncomo attachmentno código do servidor. Dessa forma, a página pai permanecerá aberta, se essa for sua principal preocupação (por que você teria escolhido Ajax desnecessariamente para isso?). Além disso, não há como lidar com isso de maneira acíncrona. PDF não são dados de caracteres. São dados binários. Você não pode fazer coisas assim $(element).load(). Você deseja usar um pedido completamente novo para isso. Pois isso <a href="pdfservlet/filename.pdf">pdf</a>é perfeitamente adequado.

Para ajudá-lo mais com o código do lado do servidor, você precisará informar mais sobre a linguagem usada e postar um trecho das tentativas de código.

Aqui está como eu fiz isso funcionar

$.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>

Resposta atualizada usando download.js

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

Eu realmente não acho que nenhuma das respostas anteriores tenha identificado o problema do pôster original. Todos eles presumem uma solicitação GET enquanto o autor da postagem estava tentando POSTAR os dados e obter um download em resposta.

No decorrer da busca por uma resposta melhor, encontramos este plug-in jQuery para solicitação de downloads de arquivos do tipo Ajax .

Em seu "coração", ele cria um formulário HTML "temporário" contendo os dados fornecidos como campos de entrada. Este formulário é anexado ao documento e postado no URL desejado. Logo em seguida, o formulário é removido novamente:

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

Atualizar a resposta de Mayur parece muito promissor e muito simples em comparação com o plug-in jQuery a que me referi.

É assim que eu resolvo esse problema.
A resposta de Jonathan Amend neste post me ajudou muito.
O exemplo abaixo é simplificado.

Para mais detalhes, o código-fonte acima é capaz de baixar um arquivo usando uma solicitação JQuery Ajax (GET, POST, PUT etc) . Também ajuda a carregar parâmetros como JSON e a alterar o tipo de conteúdo para application / json (meu padrão) .

A fonte html :

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

Um formulário simples com dois textos de entrada, um selecionar e um elemento de botão.

A fonte da página javascript :

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

Um evento simples no clique do botão. Ele cria um objeto AjaxDownloadFile. A fonte da classe AjaxDownloadFile está abaixo.

A fonte da classe AjaxDownloadFile :

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

Criei esta classe para adicionar à minha biblioteca JS. É reutilizável. Espero que ajude.

O que funcionou para mim foi o seguinte código, pois a função do servidor está recuperando 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();
                }
});

Você pode usar este plug-in que cria um formulário, o envia e, em seguida, o remove da página.

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

Isso funcionou para mim. Encontrou este plugin aqui

O código a seguir funcionou para mim

//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);

Para corrigir o problema do PDF em branco na pós-solicitação para obter dados de fluxo como PDF, precisamos adicionar o tipo de resposta como 'arraybuffer' ou 'blob' na solicitação

$.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);
  }
});

Em relação à resposta dada por Mayur Padshala esta é a lógica correta para baixar um arquivo pdf via ajax, mas como outros relatam nos comentários esta solução é de fato baixar um pdf em branco.

O motivo para isso é explicado na resposta aceita a esta pergunta : jQuery tem alguns problemas ao carregar dados binários usando solicitações AJAX, pois ainda não implementa alguns recursos de HTML5 XHR v2, consulte esta solicitação de aprimoramento e esta discussão .

Portanto, o uso HTMLHTTPRequestdo código deve ser assim:

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

crie um iframe oculto e, em seguida, em seu código ajax acima:

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

e remova o window.open(response);

Este snippet é para usuários do Angular js que enfrentarão o mesmo problema. Observe que o arquivo de resposta é baixado usando um evento de clique programado. Neste caso, os cabeçalhos foram enviados pelo servidor contendo o nome do arquivo e o conteúdo / tipo.

$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 () {

});

Você tem que fazer isso com Ajax? Não seria uma possibilidade carregá-lo em um iframe?

Espero que isso economize algumas horas e evite uma dor de cabeça. Levei um tempo para descobrir isso, mas fazer uma solicitação $ .ajax () regular estragou meu arquivo PDF, enquanto solicitá-lo por meio da barra de endereços funcionou perfeitamente. A solução foi esta:

Incluir download.js: http://danml.com/download.html

Em seguida, use XMLHttpRequest em vez da solicitação $ .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);

Se você tiver que trabalhar com fluxo de arquivo (portanto, nenhum PDF salvo fisicamente) como fazemos e quiser baixar o PDF sem recarregar a página, a seguinte função funciona para nós:

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

Devido ao target = "pdf-download-output" , a resposta é gravada no iframe e, portanto, nenhuma recarga de página é executada, mas o fluxo de resposta de pdf é gerado no navegador como um download.