tải xuống tệp bằng yêu cầu ajax

Tôi muốn gửi "yêu cầu tải xuống ajax" khi nhấp vào nút, vì vậy tôi đã thử theo cách này:

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

nhưng không hoạt động như mong đợi, làm thế nào tôi có thể làm gì? Cảm ơn bạn trước

Cập nhật ngày 27 tháng 4 năm 2015

Lên và đến cảnh HTML5 là thuộc tính tải xuống . Nó được hỗ trợ trên Firefox và Chrome và sắp có mặt trên IE11. Tùy thuộc vào nhu cầu của bạn, bạn có thể sử dụng nó thay vì yêu cầu AJAX (hoặc sử dụng window.location) miễn là tệp bạn muốn tải xuống có cùng nguồn gốc với trang web của bạn.

Bạn luôn có thể thực hiện yêu cầu AJAX / window.locationdự phòng bằng cách sử dụng một số JavaScript để kiểm tra xem downloadcó được hỗ trợ không và nếu không, hãy chuyển nó sang lệnh gọi window.location.

Câu trả lời ban đầu

Bạn không thể có yêu cầu AJAX mở lời nhắc tải xuống vì thực tế bạn phải điều hướng đến tệp để nhắc tải xuống. Thay vào đó, bạn có thể sử dụng một hàm thành công để điều hướng đến download.php. Thao tác này sẽ mở lời nhắc tải xuống nhưng sẽ không thay đổi trang hiện tại.

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

Mặc dù điều này trả lời câu hỏi, nhưng tốt hơn là chỉ sử dụng window.locationvà tránh hoàn toàn yêu cầu AJAX.

Để làm cho trình duyệt tải xuống một tệp, bạn cần thực hiện yêu cầu như sau:

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

Bạn thực sự không cần ajax cho việc này. Nếu bạn chỉ đặt "download.php" làm href trên nút hoặc nếu nó không phải là liên kết, hãy sử dụng:

window.location = 'download.php';

Trình duyệt phải nhận dạng tải xuống nhị phân và không tải trang thực mà chỉ phân phát tệp dưới dạng tải xuống.

Giải pháp trình duyệt chéo, được thử nghiệm trên Chrome, Firefox, Edge, IE11.

Trong DOM, hãy thêm thẻ liên kết ẩn:

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

Sau đó:

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

Điều đó là có thể. Bạn có thể bắt đầu tải xuống từ bên trong một hàm ajax, chẳng hạn như ngay sau khi tệp .csv được tạo.

Tôi có một hàm ajax xuất cơ sở dữ liệu liên hệ sang tệp .csv và ngay sau khi hoàn tất, nó sẽ tự động bắt đầu tải xuống tệp .csv. Vì vậy, sau khi tôi nhận được responseText và mọi thứ đều ổn, tôi chuyển hướng trình duyệt như sau:

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

Tệp download.php của tôi trông giống như sau:

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

?>

Không có làm mới trang nào và tệp tự động bắt đầu tải xuống.

LƯU Ý - Đã kiểm tra trong các trình duyệt sau:

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

tôi thích location.assign(url);

Ví dụ cú pháp hoàn chỉnh:

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

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

Giải mã tên tệp từ tiêu đề phức tạp hơn một chút ...

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

Giải pháp này không khác nhiều so với những giải pháp ở trên, nhưng đối với tôi, nó hoạt động rất tốt và tôi nghĩ nó sạch.

Tôi khuyên bạn nên mã hóa base64 phía máy chủ tệp (base64_encode (), nếu bạn đang sử dụng PHP) và gửi dữ liệu được mã hóa base64 đến máy khách

Trên máy khách, bạn làm điều này:

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

Mã này đặt dữ liệu được mã hóa vào một liên kết và mô phỏng một cú nhấp chuột vào liên kết, sau đó nó sẽ xóa nó.

Nhu cầu của bạn được đáp ứng. window.location('download.php');
Nhưng tôi nghĩ rằng bạn cần phải chuyển tệp để tải xuống, không phải lúc nào cũng tải xuống cùng một tệp và đó là lý do tại sao bạn đang sử dụng yêu cầu, một tùy chọn là tạo tệp php đơn giản như showfile.php và thực hiện một yêu cầu như

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

showfile.php

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

trong đó tệp là tên tệp được chuyển qua Get hoặc Post trong yêu cầu và sau đó bắt phản hồi trong một hàm đơn giản

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

có một giải pháp khác để tải xuống một trang web trong ajax. Nhưng tôi đang đề cập đến một trang phải được xử lý trước rồi mới tải xuống.

Trước tiên, bạn cần tách phần xử lý trang khỏi phần tải xuống kết quả.

1) Chỉ các tính toán trang được thực hiện trong lệnh gọi ajax.

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

       chức năng (dữ liệu, trạng thái) 
       {
            if (trạng thái == "thành công") 
            {
                / * 2) Trong câu trả lời, trang sử dụng các phép tính trước đó sẽ được tải xuống. Ví dụ, đây có thể là một trang in kết quả của một bảng được tính trong lệnh gọi ajax. * /
                window.location.href = DownloadPage.php + "? ID =" + 29;
            }               
       }
);

// Ví dụ: trong CalculusPage.php

    if (! rỗng ($ _ POST ["CalculusFunction"])) 
    {
        $ ID = $ _POST ["ID"];

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

// Ví dụ: trong DownloadPage.php

    $ ID = $ _GET ["ID"];

    $ sede = "CHỌN * TỪ Trang Ví dụ WHERE id =". $ ID;
    ...

    $ filename = "Export_Data.xls";
    header ("Content-Type: application / vnd.ms-excel");
    header ("Nội dung-Bố trí: inline; filename = $ filename");

    ...

Tôi hy vọng giải pháp này có thể hữu ích cho nhiều người, cũng như đối với tôi.

Đối với những người tìm kiếm một cách tiếp cận hiện đại hơn, bạn có thể sử dụng fetch API. Ví dụ sau đây cho thấy cách tải xuống tệp bảng tính. Nó được thực hiện dễ dàng với đoạn mã sau.

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

Tôi tin rằng cách tiếp cận này dễ hiểu hơn nhiều so với các XMLHttpRequestgiải pháp khác . Ngoài ra, nó có cú pháp tương tự như jQuerycách tiếp cận, mà không cần thêm bất kỳ thư viện bổ sung nào.

Tất nhiên, tôi khuyên bạn nên kiểm tra xem bạn đang phát triển trình duyệt nào, vì cách tiếp cận mới này sẽ không hoạt động trên IE. Bạn có thể tìm thấy danh sách tương thích đầy đủ của trình duyệt trên liên kết sau .

Quan trọng : Trong ví dụ này, tôi đang gửi một yêu cầu JSON đến một máy chủ đang lắng nghe trên một url. Điều này urlphải được thiết lập, trên ví dụ của tôi, tôi giả sử bạn biết phần này. Ngoài ra, hãy xem xét các tiêu đề cần thiết để yêu cầu của bạn hoạt động. Vì tôi đang gửi JSON, tôi phải thêm Content-Typetiêu đề và đặt nó thành application/json; charset=utf-8, để cho máy chủ biết loại yêu cầu mà nó sẽ nhận được.

Giải pháp @Joao Marcos phù hợp với tôi nhưng tôi đã phải sửa đổi mã để làm cho nó hoạt động trên IE, bên dưới nếu mã trông như thế nào

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