4

Estou utilizando esse método para retornar um arquivo PDF. Funciona normal se eu chamar essa action diretamente via URL:

    public ActionResult GerarProva(int idEpo, int numero, bool existeProvaGerada)
    {
        try
        {
            var relatorioBll = new RelatorioBll();
            var dados = relatorioBll.ObterQuestoesProva(numero, idEpo, existeProvaGerada);

            _dadosGeracaoProva = dados;

            System.Web.HttpContext.Current.Response.ContentType = "application/pdf";
            System.Web.HttpContext.Current.Response.AddHeader("content-disposition",
                "attachment;filename=" + ControllerContext.RouteData.Values["action"] + DateTime.Now.ToFileTime() +
                ".pdf");
            System.Web.HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);

            Stream pdfStream = System.Web.HttpContext.Current.Response.OutputStream;
            GerarPdf<ProvaItem>.GerarProva(pdfStream, dados.ToList());

            System.Web.HttpContext.Current.Response.Write(dados);
            System.Web.HttpContext.Current.Response.End();

            return File(System.Web.HttpContext.Current.Response.OutputStream, "application/pdf");
        }
        catch (Exception ex)
        {
            Danger("Erro: " + ex.Message);
        }

        return RedirectToAction("Index");
    }

Porém gostaria de baixar o arquivo através de ajax. Pois preciso realizar uma ação javascript dentro do "success":

            $.ajax({
                url: link,
                success: function (data) {
                    var blob = new Blob([data]);
                    var link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = "Preview.pdf";
                    link.click();
                },
                error: function (err, er, e) {
                    if (err.responseText.indexOf("encontradas") === -1) {
                        alert("Erro.");
                    } else {
                        alert("Erro: Não foram encontradas questões válidas para a geração da prova.");
                    }
                }
            });

Tentei esse código, porém o pdf vem com as páginas em branco. Uma suposição minha é que meu método server side não esta retornando o tipo correto...

7
  • Na verdade isto é uma gambiarra. Ajax não devolve arquivo. O correto seria usar um link normal para download. Commented 18/08/2015 às 16:52
  • Eu estava utilizando um link normal. Porém eu preciso realizar uma ação javascript ao final do download.
    – Joao Paulo
    Commented 18/08/2015 às 16:55
  • Então não é este o caminho. O certo é você aguardar a ação pós-download. Commented 18/08/2015 às 16:57
  • Quando eu clico no link e o pdf é baixado eu não tenho como fazer a ação que eu queria via javascript. Por isso pensei nessa alternativa
    – Joao Paulo
    Commented 18/08/2015 às 16:59
  • segundo esta outra gambiarra, você pode criar um cookie no cliente e invalidar o mesmo no lado do servidor apos o termino do download. Commented 18/08/2015 às 17:04

3 Respostas 3

1

A questão pede uma solução via ajax, no entanto, o intuito é executar uma ação ao término do download por isso apresento uma solução simples:

Exemplo completo:

    <html>
    <head>
    <script src="js/jquery/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $().ready(function() {

    $('#target').load(function(){
        /*
        Aqui, o download foi completado. (o carregamento do iframe)
        */
        foo();
    });

    $('#file_download').click(function() {
        $("#target").attr("src",$(this).attr('href'));
    });

});

function foo()
{
    console.log('loaded');
}
    </script>
    </head>
    <body>

    <a id="file_download" download="arquivo.pdf" href="http://localhost/arquivo.pdf" > Download PDF </a><br />


    <iframe id="target" src="" width="50" height="10" border="1"></iframe>

    </body>
    </html>

A técnica consiste em fazer um download normalmente, acionado pelo elemento <a>, onde o atributo download indica que o link deve ser baixado.

Adicionamos uma escuta para o evento de click no elemento <a>. A ideia é que no momento do clique, o download iniciará. Nesse exato monento, um iframe será carregado com o mesmo link.

A utilidade do iframe nessa técnica é devido ao método load() que retorna o momento em que o iframe completa o carregamento.

A lógica nisso é, o mesmo arquivo está sendo carregado pelo download do elemento <a> e pelo iframe.

Ambos terminarão o dowload ao mesmo tempo e, nesse momento, é executado a ação desejada.

Pode acontecer do dowload e o carregamento não completarem caso o browser mostre uma caixa de diálogo para que o usuário confirme a execução. Nesse momento, independente do usuário aceitar ou não, o iframe continuará carregando.

Para tornar a ação mais discreta, oculte o iframe com $('#target').hide().

Isso pode parecer uma solução perfeita, porém, o atributo download não é suportado pelo IE e Safari.

http://www.w3schools.com/tags/att_a_download.asp

Caso queira executar num ambiente controlado, onde o usuário deve usar o Chrome , Firefox ou Opera, pode ser uma boa solução.

Apesar desse pequeno inconveniente com ao atributo download, ainda assim é possível criar implementações para os demais browsers.

0

Organize da seguinte forma:

Crie a sua função AJAX recebendo como parâmetro uma função a ser executada dentro do success:

function someAjax(functionToExecute){
    $.ajax({
        type: 'post',
        url: 'www.site.com',
        success: function (response) {
            functionToExecute(response);
        },
        dataType: 'json',
        global: false
    });
}

Função a ser executada dentro do success:

displayFile(file){
    // Faz algo
}

Função que chama a função que encapsula a chamada AJAX. Passe como parâmetro o nome da função sem aspas.

function (){
    someAjax(displayFile);
}
1
  • Resposta não diz a respeito ao problema de pergunta
    – Sveen
    Commented 2/01/2023 às 14:47
0

olha, já que o response esperado é um blob, então é interresante fazer uma requisição ajax atraves do XMLHttpRequest e setar o responseType para blob.

var uploadFile = document.getElementById("uploadFile");

uploadFile.addEventListener("change", function (event) {
  var link = URL.createObjectURL(event.target.files[0]);
  
  var xmlHttp = new XMLHttpRequest();  
  xmlHttp.open("GET", link, true);
  xmlHttp.responseType = "blob";
  xmlHttp.onreadystatechange = function (e) {
    if (xmlHttp.readyState == 4 && (xmlHttp.status == 200 || xmlHttp.status == 0)) {
      var link = document.createElement('a');
      link.href = URL.createObjectURL(xmlHttp.response);
      link.download = "Preview.pdf";
      link.click();
    }
  }    
  xmlHttp.send();
})
<div>
  <p>será feita uma coisa do arquivo selecionado e o mesmo será baixando por AJAX.</p>
  <input id="uploadFile" type="file" />
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .