PHP 實現當頁無刷新下載文件：iframe 隱形提交方案詳解

很多場景需要「點擊下載、頁面不跳轉、不彈新窗」。本文提供一套基於隱藏 <iframe> 的輕量方案，兼容性極佳，代碼量極小，適合快速集成到現有專案。

核心原理

1. 頁面預置一個 display:none 的 <iframe>
2. 點擊下載鏈接時，JS 將目標 URL 設置給 iframe 的 src
3. 瀏覽器在 iframe 中發起請求，服務端返回帶 Content-Disposition: attachment 的響應
4. 主頁面無任何跳轉、刷新，用戶感知為「靜默下載」

三段式代碼實現

1. 控制器入口

public function downFile($path = '') {
    if (!$path) header("Location: /");
    download($path);  // 調用下載核心函數
}

2. 通用下載函數 download()

function download($file_url, $new_name = '') {
    if (!isset($file_url) || trim($file_url) === '') { echo '500'; return; }
    if (!file_exists($file_url)) { echo '404'; return; }

    $file_name = basename($file_url);
    $ext = pathinfo($file_url, PATHINFO_EXTENSION);
    $file_name = $new_name ? urlencode($new_name) : $file_name;

    $fp = fopen($file_url, 'rb');
    // 輸出下載頭
    header("Content-Type: application/octet-stream");
    header("Accept-Ranges: bytes");
    header("Content-Length: " . filesize($file_url));
    header("Content-Disposition: attachment; filename=\"{$file_name}\"");
    // 分塊輸出，防大文件佔記憶體
    while (!feof($fp)) {
        echo fread($fp, 8192);
        ob_flush(); flush();
    }
    fclose($fp);
    exit;
}

3. 前端 HTML + jQuery

<iframe id="downFrame" src="" style="display:none;"></iframe>

<a href="javascript:;" class="downLoad" path="/data/report.pdf">下載報告</a>
<a href="javascript:;" class="downLoad" path="/data/image.png">下載圖片</a>

<script>
$(function(){
    $('.downLoad').click(function(){
        var path = $(this).attr('path');
        $('#downFrame').attr('src', "/controller/downFile?path=" + encodeURIComponent(path));
    });
});
</script>

關鍵細節與增強建議

替代方案對比

• location.href 直接跳轉：簡單但會導致頁面卸載，單頁應用不適用
• a 標籤 download 屬性：僅支援同源、現代瀏覽器，無法動態生成文件名
• Blob + ObjectURL (AJAX)：支援進度條、大文件分片，但代碼複雜、IE 不支援
• iframe 方案（本文）：全瀏覽器支援、零依賴、不阻塞主頁、實現最快

若專案需求僅為「靜默下載」，iframe 方案是性價比最高的選擇。如需進度條、斷點續傳，請轉向 Blob/AJAX 或 WebUploader 等成熟組件。