摘要:以上代碼在瀏覽器中,均可以成功下載文件,但是在中,會報錯。如下拒絕訪問造成以上原因是在中使用生成的是不帶域名的鏈接,如下而等瀏覽器生成的是帶域名的,如下所以在下通過標簽的來下載是不行的。解決方法使用,代替。
我們先來看一份代碼
function download(content, filename) { // 字符內容轉變成blob地址 var blob = new Blob([content]); var eleLink = document.createElement("a"); eleLink.download = filename; $(eleLink).css("display", "none"); eleLink.href = URL.createObjectURL(blob); document.body.appendChild(eleLink); eleLink.click(); document.body.removeChild(eleLink); };
上面的代碼的意思是先用blob把字符串內容轉變成blob鏈接,然后利用a標簽自帶的下載功能把內容下載下來。
以上代碼在Chrome、Firefox、Safari、360、EdgeHtml瀏覽器中,均可以成功下載文件,但是在Edge中,會報錯。如下:
造成以上原因是在Edge中使用Blob生成的是不帶域名的blob鏈接,如下:
而chrome等瀏覽器生成的是帶域名的,如下:
所以在edge下通過a標簽的href來下載是不行的。
解決方法使用 window.navigator.msSaveOrOpenBlob(blob, filename),代替 window.URL.createObjectURL。
上代碼:
function download(content, filename) { // 字符內容轉變成blob地址 var blob = new Blob([content]); if("msSaveOrOpenBlob" in navigator){ window.navigator.msSaveOrOpenBlob(blob, filename); return; } var eleLink = document.createElement("a"); eleLink.download = filename; $(eleLink).css("display", "none"); eleLink.href = URL.createObjectURL(blob); document.body.appendChild(eleLink); eleLink.click(); document.body.removeChild(eleLink); };
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108565.html
摘要:出于安全考慮,無法直接調用寫文件到磁盤,但是卻可以通過下載來變相實現保存功能。生成文件并下載是一種逗號分隔的表格文件格式,可以很好的被支持,由于其文件格式簡單,所以經常用在簡單的表格上面。 出于安全考慮,JS無法直接調用FileAPI寫文件到磁盤,但是卻可以通過下載來變相實現保存功能。JS要實現下載功能,一般都是這么幾個過程:生成下載的URL,動態創建一個A標簽,并將其href指向生成...
摘要:問題以上兩種方式,當在下載格式,或者視頻文件時,瀏覽器會直接播放該文件,而達不到直接下載的功能,此時,當下載音視頻文件時無法使用以上兩種方式。 1、通過window.open()打開新頁面下載文件 window.open(`url`, _self) 使用場景:下載excel文件,后端提供接口,接口返回的是文件流,可以直接使用window.open(),最簡單的方式。 優點:最簡潔; 弊...
摘要:場景簡介由于業務需要,經常遇到下載各類文件的需求,其中最頭疼的莫過于前端下載圖片了,直接給個圖片文件地址會變成直接打開圖片,而不是彈窗提示另存為,研究了下前端實現文件下載最便捷的方法還是創建標簽,寫入屬性實現點擊下載,但這在瀏覽器上的實現又 場景簡介 由于業務需要,經常遇到下載各類文件的需求,其中最頭疼的莫過于前端下載圖片了,直接給個圖片文件地址會變成直接打開圖片,而不是彈窗提示另存為...
摘要:前言將數據報表導出,是數據報告展示常用的附帶功能。今天我們主要講的是直接通過前端將數據導出的格式的文件。但其實真正的答案應該是把相應的數據轉換成和。若是超過瀏覽器自身限制的最大長度,會導致下載失敗。 前言 將數據報表導出,是web數據報告展示常用的附帶功能。通常這種功能都是用后端開發人員編寫的。今天我們主要講的是直接通過前端js將數據導出Excel的CSV格式的文件。 原理 首先在本地...
閱讀 3635·2021-11-23 09:51
閱讀 1983·2021-11-16 11:42
閱讀 3207·2021-11-08 13:20
閱讀 1094·2019-08-30 15:55
閱讀 2200·2019-08-30 10:59
閱讀 1231·2019-08-29 14:04
閱讀 1009·2019-08-29 12:41
閱讀 1980·2019-08-26 12:22