在這個數位時代,檔案下載無所不在。借助 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中文網其他相關文章!