завантажити файл за допомогою запиту ajax

Я хочу надіслати "запит на завантаження ajax", коли я натискаю кнопку, тому я спробував таким чином:

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

але не працює, як очікувалося, як я можу це зробити? Заздалегідь спасибі

Оновлення 27 квітня 2015 р

Атрибут завантаження - це прихід на сцену HTML5 . Він підтримується у Firefox та Chrome, і незабаром він з’явиться в IE11. Залежно від ваших потреб, ви можете використовувати його замість запиту AJAX (або використовуватиwindow.location ), якщо файл, який ви хочете завантажити, має те саме джерело, що і ваш сайт.

Ви завжди можете зробити запит AJAX / window.locationрезервний варіант, використовуючи якийсь JavaScript, щоб перевірити, чи downloadпідтримується, а якщо ні, переключивши його на викликwindow.location .

Оригінальна відповідь

Ви не можете мати запит AJAX, щоб відкрити підказку про завантаження, оскільки вам фізично потрібно перейти до файлу, щоб запросити на завантаження. Натомість ви можете скористатися функцією успіху для переходу до download.php. Це відкриє запит на завантаження, але не змінить поточну сторінку.

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

Незважаючи на те, що це відповідає на питання, краще просто використовувати window.locationі повністю уникати запиту AJAX.

Щоб браузер завантажив файл, потрібно зробити такий запит:

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

Для цього вам насправді взагалі не потрібен ajax. Якщо ви просто встановили "download.php" як href на кнопці, або, якщо це не посилання, використовуйте:

window.location = 'download.php';

Браузер повинен розпізнати двійкове завантаження і не завантажувати фактичну сторінку, а просто подавати файл як завантаження.

Рішення для перехресного браузера, тестоване на Chrome, Firefox, Edge, IE11.

У DOM додайте прихований тег посилання:

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

Тоді:

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

Можливо. Ви можете почати завантаження зсередини функції ajax, наприклад, відразу після створення файлу .csv.

У мене є функція ajax, яка експортує базу даних контактів у файл .csv, і відразу після її завершення він автоматично починає завантаження файлу .csv. Отже, після того, як я отримую responseText і все в порядку, я перенаправляю браузер так:

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

Мій файл download.php виглядає так:

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

?>

Сторінку немає, і файл автоматично починає завантажуватися.

ПРИМІТКА - Перевірено в наступних браузерах:

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

я віддаю перевагу location.assign(url);

Повний приклад синтаксису:

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

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

Розшифровка імені файлу із заголовка дещо складніша ...

    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, '');
    }

Це рішення мало чим відрізняється від наведеного вище, але для мене воно працює дуже добре, і я думаю, що воно чисте.

Я пропоную закодувати base64 сторону файлового сервера (base64_encode (), якщо ви використовуєте PHP) і надіслати закодовані дані base64 клієнту

На клієнті ви робите це:

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

Цей код розміщує закодовані дані у посиланні та імітує клацання на посиланні, а потім видаляє їх.

Ваші потреби покриваються, window.location('download.php');
але я думаю, що вам потрібно передати файл для завантаження, а не завжди завантажувати той самий файл, і тому ви використовуєте запит, один із варіантів - створити php-файл так просто, як showfile.php і зробити запит, як

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

showfile.php

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

де файл - це назва файлу, передана в запиті за допомогою Get або Post, а потім просто вловлює відповідь у функції

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

є інше рішення для завантаження веб-сторінки в ajax. Але я маю на увазі сторінку, яку спочатку потрібно обробити, а потім завантажити.

Спочатку потрібно відокремити обробку сторінки від завантаження результатів.

1) Під час виклику ajax виконуються лише обчислення сторінок.

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

       функція (дані, статус) 
       {
            якщо (статус == "успіх") 
            {
                / * 2) У відповіді завантажується сторінка, яка використовує попередні розрахунки. Наприклад, це може бути сторінка, яка друкує результати таблиці, розрахованої під час виклику ajax. * /
                window.location.href = DownloadPage.php + "? ID =" + 29;
            }               
       }
);

// Наприклад: у CalculusPage.php

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

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

// Наприклад: у DownloadPage.php

    $ ID = $ _GET ["ID"];

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

    $ filename = "Export_Data.xls";
    заголовок ("Тип вмісту: application / vnd.ms-excel");
    заголовок ("Розміщення вмісту: вбудований; ім'я файлу = $ ім'я файлу");

    ...

Сподіваюсь, це рішення може бути корисним для багатьох, як і для мене.

Для тих, хто шукає більш сучасний підхід, ви можете використовувати fetch API. У наступному прикладі показано, як завантажити файл електронної таблиці. Це легко зробити за допомогою наступного коду.

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

Я вважаю, що такий підхід набагато легше зрозуміти, ніж інші XMLHttpRequestрішення. Крім того, він має подібний синтаксис до jQueryпідходу, без необхідності додавати додаткові бібліотеки.

Звичайно, я порадив би перевірити, який браузер ви розробляєте, оскільки цей новий підхід не працюватиме в IE. Повний список сумісності браузера можна знайти за наступним посиланням .

Важливо : У цьому прикладі я надсилаю запит JSON на сервер, який прослуховує дані url. Це urlпотрібно встановити, на моєму прикладі я припускаю, що ви знаєте цю частину. Також враховуйте заголовки, необхідні для роботи вашого запиту. Оскільки я надсилаю JSON, я повинен додати Content-Typeзаголовок і встановити його application/json; charset=utf-8, щоб повідомити сервер про тип запиту, який він отримає.

Рішення @Joao Marcos працює для мене, але мені довелося змінити код, щоб він працював на IE, нижче, якщо виглядає код

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