baixar arquivo usando uma solicitação ajax

Desejo enviar uma "solicitação de download de Ajax" quando clico em um botão, então tentei desta forma:

javascript:

var xhr = new XMLHttpRequest();
xhr.open("GET", "download.php");
xhr.send();

download.php:

<?
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename= file.txt");
header("Content-Transfer-Encoding: binary");    
readfile("file.txt");
?>

mas não funciona conforme o esperado, como posso fazer? Agradeço antecipadamente

Atualização em 27 de abril de 2015

O atributo de download está em alta e chegando à cena do HTML5 . É compatível com Firefox e Chrome, e em breve chegará ao IE11. Dependendo de suas necessidades, você pode usá-lo em vez de uma solicitação AJAX (ou usando window.location), desde que o arquivo que deseja baixar seja da mesma origem do seu site.

Você sempre pode fazer a solicitação AJAX / window.locationum fallback usando algum JavaScript para testar se downloadé compatível e, se não for, alternando para chamar window.location.

Resposta original

Você não pode fazer com que uma solicitação AJAX abra o prompt de download, pois é necessário navegar fisicamente até o arquivo para solicitar o download. Em vez disso, você pode usar uma função de sucesso para navegar até download.php. Isso abrirá o prompt de download, mas não mudará a página atual.

$.ajax({
    url: 'download.php',
    type: 'POST',
    success: function() {
        window.location = 'download.php';
    }
});

Mesmo que isso responda à pergunta, é melhor apenas usar window.locatione evitar totalmente a solicitação AJAX.

Na verdade, você não precisa de Ajax para isso. Se você apenas definir "download.php" como o href no botão, ou, se não for um link, use:

window.location = 'download.php';

O navegador deve reconhecer o download binário e não carregar a página real, mas apenas servir o arquivo como um download.

Para fazer o navegador baixar um arquivo, você precisa fazer a solicitação assim:

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

Solução para vários navegadores, testada no Chrome, Firefox, Edge, IE11.

No DOM, adicione uma tag de link oculto:

<a id="target" style="display: none"></a>

Então:

var req = new XMLHttpRequest();
req.open("GET", downloadUrl, true);
req.responseType = "blob";
req.setRequestHeader('my-custom-header', 'custom-value'); // adding some headers (if needed)

req.onload = function (event) {
  var blob = req.response;
  var fileName = null;
  var contentType = req.getResponseHeader("content-type");

  // IE/EDGE seems not returning some response header
  if (req.getResponseHeader("content-disposition")) {
    var contentDisposition = req.getResponseHeader("content-disposition");
    fileName = contentDisposition.substring(contentDisposition.indexOf("=")+1);
  } else {
    fileName = "unnamed." + contentType.substring(contentType.indexOf("/")+1);
  }

  if (window.navigator.msSaveOrOpenBlob) {
    // Internet Explorer
    window.navigator.msSaveOrOpenBlob(new Blob([blob], {type: contentType}), fileName);
  } else {
    var el = document.getElementById("target");
    el.href = window.URL.createObjectURL(blob);
    el.download = fileName;
    el.click();
  }
};
req.send();

É possível. Você pode ter o download iniciado de dentro de uma função ajax, por exemplo, logo após o arquivo .csv ser criado.

Eu tenho uma função ajax que exporta um banco de dados de contatos para um arquivo .csv e, assim que termina, ele inicia automaticamente o download do arquivo .csv. Então, depois que obtenho o responseText e tudo está OK, redireciono o navegador assim:

window.location="download.php?filename=export.csv";

Meu arquivo download.php se parece com este:

<?php

    $file = $_GET['filename'];

    header("Cache-Control: public");
    header("Content-Description: File Transfer");
    header("Content-Disposition: attachment; filename=".$file."");
    header("Content-Transfer-Encoding: binary");
    header("Content-Type: binary/octet-stream");
    readfile($file);

?>

Não há atualização de página e o download do arquivo é iniciado automaticamente.

NOTA - Testado nos seguintes navegadores:

Chrome v37.0.2062.120 
Firefox v32.0.1
Opera v12.17
Internet Explorer v11

eu prefiro location.assign(url);

Exemplo de sintaxe completo:

document.location.assign('https://www.urltodocument.com/document.pdf');

developer.mozilla.org/en-US/docs/Web/API/Location.assign

Decodificar um nome de arquivo do cabeçalho é um pouco mais complexo ...

    var filename = "default.pdf";
    var disposition = req.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, '');
    }

Esta solução não é muito diferente das anteriores, mas para mim funciona muito bem e acho que está limpa.

Sugiro codificar em base64 o lado do servidor de arquivos (base64_encode (), se você estiver usando PHP) e enviar os dados codificados em base64 para o cliente

No cliente, você faz isso:

 let blob = this.dataURItoBlob(THE_MIME_TYPE + "," + response.file);
 let uri = URL.createObjectURL(blob);
 let link = document.createElement("a");
 link.download = THE_FILE_NAME,
 link.href = uri;
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);

Este código coloca os dados codificados em um link e simula um clique no link, depois o remove.

Suas necessidades são atendidas por window.location('download.php');
Mas acho que você precisa passar o arquivo a ser baixado, nem sempre baixar o mesmo arquivo, e é por isso que você está usando um pedido, uma opção é criar um arquivo php tão simples como showfile.php e faça um pedido como

var myfile = filetodownload.txt
var url = "shofile.php?file=" + myfile ;
ajaxRequest.open("GET", url, true);

showfile.php

<?php
$file = $_GET["file"] 
echo $file;

em que arquivo é o nome do arquivo passado por Get ou Post na solicitação e, em seguida, captura a resposta em uma função simplesmente

if(ajaxRequest.readyState == 4){
                        var file = ajaxRequest.responseText;
                        window.location = 'downfile.php?file=' + file;  
                    }
                }

existe outra solução para baixar uma página da web em ajax. Mas estou me referindo a uma página que primeiro deve ser processada e depois baixada.

Primeiro você precisa separar o processamento da página do download dos resultados.

1) Apenas os cálculos da página são feitos na chamada ajax.

$ .post ("CalculusPage.php", {calculusFunction: true, ID: 29, data1: "a", data2: "b"},

       função (dados, status) 
       {
            if (status == "sucesso") 
            {
                / * 2) Na resposta é baixada a página que usa os cálculos anteriores. Por exemplo, pode ser uma página que imprime os resultados de uma tabela calculada na chamada ajax. * /
                window.location.href = DownloadPage.php + "? ID =" + 29;
            }               
       }
);

// Por exemplo: no CalculusPage.php

    if (! empty ($ _ POST ["calculusFunction"])) 
    {
        $ ID = $ _POST ["ID"];

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

// Por exemplo: no DownloadPage.php

    $ ID = $ _GET ["ID"];

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

    $ filename = "Export_Data.xls";
    cabeçalho ("Content-Type: application / vnd.ms-excel");
    header ("Content-Disposition: inline; filename = $ filename");

    ...

Espero que esta solução possa ser útil para muitos, como foi para mim.

Para aqueles que procuram uma abordagem mais moderna, você pode usar o fetch API. O exemplo a seguir mostra como fazer download de um arquivo de planilha. Isso é feito facilmente com o código a seguir.

fetch(url, {
    body: JSON.stringify(data),
    method: 'POST',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
})
.then(response => response.blob())
.then(response => {
    const blob = new Blob([response], {type: 'application/application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
    const downloadUrl = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = downloadUrl;
    a.download = "file.xlsx";
    document.body.appendChild(a);
    a.click();
})

Acredito que essa abordagem seja muito mais fácil de entender do que outras XMLHttpRequestsoluções. Além disso, possui uma sintaxe semelhante à jQueryabordagem, sem a necessidade de adicionar quaisquer bibliotecas adicionais.

Claro, eu aconselharia verificar para qual navegador você está desenvolvendo, já que essa nova abordagem não funcionará no IE. Você pode encontrar a lista completa de compatibilidade de navegadores no link a seguir .

Importante : neste exemplo, estou enviando uma solicitação JSON a um servidor que está escutando no dado url. Isso urldeve ser definido, no meu exemplo, estou assumindo que você conhece esta parte. Além disso, considere os cabeçalhos necessários para que sua solicitação funcione. Como estou enviando um JSON, devo adicionar o Content-Typecabeçalho e defini-lo application/json; charset=utf-8como, para permitir que o servidor saiba o tipo de solicitação que receberá.

A solução @Joao Marcos funciona para mim, mas tive que modificar o código para fazê-lo funcionar no IE, abaixo se é o código

       downloadFile(url,filename) {
        var that = this;
        const extension =  url.split('/').pop().split('?')[0].split('.').pop();

        var req = new XMLHttpRequest();
        req.open("GET", url, true);
        req.responseType = "blob";
        req.onload = function (event) {
            const fileName = `${filename}.${extension}`;
            const blob = req.response;

            if (window.navigator.msSaveBlob) { // IE
                window.navigator.msSaveOrOpenBlob(blob, fileName);
            } 
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);                
            link.download = fileName;
            link.click();
            URL.revokeObjectURL(link.href);

        };

        req.send();
    },