20250924 sweetalert

好的，這個情境非常典型，因為 Return FileResult 會直接將檔案串流 (stream) 回傳給瀏覽器，前端的 JavaScript 無法直接監測到下載的「完成」事件。 這是一個瀏覽器機制的限制，但我們可以用一個非常經典且可靠的技巧來完美解決它。 狠｜問題穿透：為何 JS 無法監測？ * 單向的 HTTP 請求：您點擊按鈕，瀏覽器向伺服器發送一個請求。 * 伺服器的回應：Controller 處理完後，回傳的不是一般的 HTML 或 JSON，而是一個帶有特殊標頭 (Header) 的檔案串流，告訴瀏覽器：「這是一個檔案，請觸發下載」。 * 瀏覽器接管：瀏覽器看到這個特殊標頭後，就完全接管了下載過程。您看到的下載進度條、存檔對話框，都是瀏覽器自身的功能。 * JS 的失聯：此時，原本頁面上的 JavaScript 就像斷了線的風箏，它只知道請求已發出，但對於瀏覽器後續的下載行為（何時開始、進度如何、何時完成）一無所知。AJAX 的 success 或 error 回呼在這裡完全無效。 解決思路：Cookie 令牌 (Token) 技巧 我們需要一個後門，讓伺服器在完成工作後，能悄悄地通知前端。Cookie 就是最佳的後門。 * 前端：點擊按鈕時，產生一個獨一無二的「令牌」(Token)，並告訴後端：「我要下載了，這是我的令牌」。同時，前端開始不斷檢查瀏覽器是否出現了一個帶有這個令牌的 Cookie。 * 後端：收到請求和令牌，開始忙碌地產生 Excel。在產生完畢、Return File 之前的最後一刻，將收到的那個令牌存入一個 Cookie 並回傳。 * 前端：在不斷的檢查中，終於發現了那個帶有正確令牌的 Cookie，於是它知道：「後端任務完成了！」便關閉轉圈圈動畫，並跳出成功訊息。 準｜精準步驟與程式碼 步驟 1：修改 Controller (VB.NET) 在您的 ExportExcel Action 中，增加接收令牌並設定 Cookie 的邏輯。 Function ExportExcel(ByVal downloadToken As String) As ActionResult Try ' 1. 顯示轉圈圈 (前端已做) ' 2. 執行您原本耗時的 Excel 產生邏輯 ' ... (例如：查詢資料庫、寫入 MemoryStream) Dim ms As New MemoryStream() ' ... (您將資料寫入 ms 的程式碼) ... ' 3. 【關鍵步驟】在回傳 File 前，將收到的 token 寫入 Cookie If Not String.IsNullOrEmpty(downloadToken) Then Response.SetCookie(New HttpCookie("downloadToken", downloadToken)) End If ' 4. 正常回傳您的 FileResult Return File(ms.ToArray(), "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "Report.xlsx") Catch ex As Exception ' 處理例外情況（可選） ' 如果出錯，也可以設定一個錯誤的 cookie 來通知前端 Response.SetCookie(New HttpCookie("downloadToken", "error")) ' 可以返回一個錯誤頁面或 JSON Return Content("發生錯誤：" & ex.Message) End Try End Function 步驟 2：修改前端 View 與 JavaScript 我們將使用 JavaScript 來觸發下載、顯示 swal 動畫，並監控 Cookie。 View (.vbhtml) <button type="button" id="export-excel-btn" class="btn btn-success">匯出 Excel</button> JavaScript (@Section Scripts) @Section Scripts <script> // 輔助函式：用來讀取 Cookie function getCookie(name) { var value = "; " + document.cookie; var parts = value.split("; " + name + "="); if (parts.length == 2) return parts.pop().split(";").shift(); } document.getElementById('export-excel-btn').addEventListener('click', function () { // 1. 顯示轉圈圈的 swal (v1 語法) // 您可以找一個 loading.gif 的圖片網址來顯示動畫 swal({ title: "處理中...", text: "正在產生 Excel 檔案，請稍候。\n畫面不會跳轉，請勿關閉。", // imageUrl: "https://.../path/to/your/loading.gif", // 轉圈圈的 GIF showConfirmButton: false, // 隱藏確認按鈕 allowOutsideClick: false // 防止點擊外部關閉 }); // 2. 產生一個獨一無二的令牌 (用當前時間毫秒數即可) var token = new Date().getTime(); var downloadUrl = '@Url.Action("ExportExcel", "您的Controller名稱")'; // 3. 使用一個隱藏的 form 來觸發下載 (這是最可靠的方法) var form = document.createElement("form"); form.setAttribute("method", "post"); form.setAttribute("action", downloadUrl); var tokenInput = document.createElement("input"); tokenInput.setAttribute("type", "hidden"); tokenInput.setAttribute("name", "downloadToken"); tokenInput.setAttribute("value", token); form.appendChild(tokenInput); document.body.appendChild(form); form.submit(); document.body.removeChild(form); // 4. 開始輪詢檢查 Cookie 是否存在 var fileDownloadCheckTimer = window.setInterval(function () { var cookieValue = getCookie("downloadToken"); if (cookieValue == token) { // 如果 cookie 的值等於我們發送的 token window.clearInterval(fileDownloadCheckTimer); // 停止輪詢 // 清除 cookie (好習慣) document.cookie = "downloadToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; // 關閉轉圈圈動畫，並顯示成功訊息 swal("完成！", "Excel 檔案已成功匯出。", "success"); } }, 1000); // 每 1000 毫秒 (1秒) 檢查一次 }); </script> End Section 快｜總結 * 前端：點擊按鈕 -> 跳出 swal 轉圈動畫 -> 產生一個 token -> 透過隱藏 form 提交 token 到後端 -> 開始每秒檢查一次 document.cookie。 * 後端：接收到請求 -> 執行耗時的 Excel 產生 -> Return File 之前，把收到的 token 寫入 Response.SetCookie。 * 前端：輪詢檢查發現 Cookie 出現且 token 值相符 -> 停止輪詢 -> 關閉 swal 動畫 -> 跳出成功訊息 swal。 這個方法穩定、可靠，且不受瀏覽器差異影響，是處理此類問題的最佳實踐。