首頁 > web前端 > js教程 > Ajax 如何非同步觸發檔案保存對話方塊以增強使用者體驗?

Ajax 如何非同步觸發檔案保存對話方塊以增強使用者體驗?

Linda Hamilton
發布: 2024-12-31 02:52:09
原創
611 人瀏覽過

How Can Ajax Asynchronously Trigger File Save Dialogs for Enhanced User Experience?

使用 Ajax 非同步檔案下載:解鎖檔案儲存對話方塊

在這個數位時代,檔案下載無所不在。借助 Ajax 的功能,我們可以透過允許非同步檔案下載而不中斷網頁互動來增強使用者體驗。

問題

對伺服器端檔案使用 Struts2 操作時下載,透過 jQuery 呼叫操作擷取二進位流中的資料。然而,期望的結果是觸發一個文件保存對話框,允許用戶在本地保存文件。

現代瀏覽器解決方案

對於現代瀏覽器,以下方法是建議:

<br>fetch('your- download-endpoint').then(resp => resp.blob()).then(blob => {<br> const url = window.URL.createObjectURL(blob);<br> const a = document.createElement('a');<br> a.style.display = 'none';<br> a.href = url;<br> a.download = '您的檔名'; //指定所需的檔名<br> document.body.appendChild(a);<br> a.click();<br> window.URL.revokeObjectURL(url);<br>});<br>
登入後複製
;

});

;

此程式碼為blob 資料建立一個暫存URL,然後將其附加到附加到文件正文的錨元素。點擊此隱藏的錨元素會觸發檔案儲存對話框,下載完成後,臨時 URL 將被撤銷。

注意事項

雖然此方法適用於中小型文件,重要的是要考慮非常大的下載的記憶體消耗。如果您預期檔案很大,使用 iframe 和 cookie 等替代技術可能會更合適。

以上是Ajax 如何非同步觸發檔案保存對話方塊以增強使用者體驗?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板