為什麼 AJAX 不適用於檔案下載，最好的替代方案是什麼？-js教程-PHP中文網

為什麼 AJAX 不適用於檔案下載，最好的替代方案是什麼？

Barbara Streisand

發布： 2024-12-09 17:50:12

原創

619 人瀏覽過

Why Doesn't AJAX Work for File Downloads, and What's the Best Alternative?

使用AJAX 請下載檔案：綜合指南

問題：嘗試啟動「ajax 下載要求」按一下按鈕後不會產生所需的結果。下面提供了JavaScript 和PHP 的演示：

JavaScript:

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

登入後複製

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

登入後複製

上面的程式碼沒有如預期運作。您能否提供有關解決此問題的必要步驟的見解？

解決方案：

透過 AJAX 請求啟動檔案下載是不可行的。對於此任務，需要直接存取該文件。

更新的解決方案（2015 年4 月27 日）：

使用「下載」屬性：

HTML5 引入了「下載」屬性。它受到 Firefox 和 Chrome 的支持，並且很快就會被包含在 IE11 中。它允許在同源直接下載檔案。

JavaScript:

// Check if 'download' is supported
if ('download' in HTMLAnchorElement.prototype) {
    // Create an anchor element
    var anchor = document.createElement('a');

    // Set 'download' attribute and file URL
    anchor.download = 'file.txt';
    anchor.href = 'download.php';

    // Trigger file download
    anchor.click();
} else {
    // Fallback to previous method
    window.location = 'download.php';
}

登入後複製

原始解決方案:

使用'window.location':

與 AJAX 請求不同，'window.location' 直接導航到文件，觸發下載。

JavaScript ：

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

登入後複製

為了簡單起見，建議避免完全使用 AJAX 請求，只需使用「window.location」即可。

以上是為什麼 AJAX 不適用於檔案下載，最好的替代方案是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！