資訊專欄INFORMATION COLUMN
摘要：以上代碼在瀏覽器中，均可以成功下載文件，但是在中，會報錯。如下拒絕訪問造成以上原因是在中使用生成的是不帶域名的鏈接，如下而等瀏覽器生成的是帶域名的，如下所以在下通過標簽的來下載是不行的。解決方法使用，代替。
我們先來看一份代碼
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);
};
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/108565.html
摘要：出于安全考慮，無法直接調用寫文件到磁盤，但是卻可以通過下載來變相實現(xiàn)保存功能。生成文件并下載是一種逗號分隔的表格文件格式，可以很好的被支持，由于其文件格式簡單，所以經常用在簡單的表格上面。 出于安全考慮，JS無法直接調用FileAPI寫文件到磁盤，但是卻可以通過下載來變相實現(xiàn)保存功能。JS要實現(xiàn)下載功能，一般都是這么幾個過程：生成下載的URL，動態(tài)創(chuàng)建一個A標簽，并將其href指向生成...
摘要：問題以上兩種方式，當在下載格式，或者視頻文件時，瀏覽器會直接播放該文件，而達不到直接下載的功能，此時，當下載音視頻文件時無法使用以上兩種方式。 1、通過window.open()打開新頁面下載文件 window.open(`url`, _self) 使用場景：下載excel文件，后端提供接口，接口返回的是文件流，可以直接使用window.open()，最簡單的方式。 優(yōu)點：最簡潔； 弊...
摘要：場景簡介由于業(yè)務需要，經常遇到下載各類文件的需求，其中最頭疼的莫過于前端下載圖片了，直接給個圖片文件地址會變成直接打開圖片，而不是彈窗提示另存為，研究了下前端實現(xiàn)文件下載最便捷的方法還是創(chuàng)建標簽，寫入屬性實現(xiàn)點擊下載，但這在瀏覽器上的實現(xiàn)又 場景簡介 由于業(yè)務需要，經常遇到下載各類文件的需求，其中最頭疼的莫過于前端下載圖片了，直接給個圖片文件地址會變成直接打開圖片，而不是彈窗提示另存為...
摘要：前言將數(shù)據(jù)報表導出，是數(shù)據(jù)報告展示常用的附帶功能。今天我們主要講的是直接通過前端將數(shù)據(jù)導出的格式的文件。但其實真正的答案應該是把相應的數(shù)據(jù)轉換成和。若是超過瀏覽器自身限制的最大長度，會導致下載失敗。 前言 將數(shù)據(jù)報表導出，是web數(shù)據(jù)報告展示常用的附帶功能。通常這種功能都是用后端開發(fā)人員編寫的。今天我們主要講的是直接通過前端js將數(shù)據(jù)導出Excel的CSV格式的文件。 原理 首先在本地...
閱讀 3651·2021-11-23 09:51
閱讀 1995·2021-11-16 11:42
閱讀 3242·2021-11-08 13:20
閱讀 1098·2019-08-30 15:55
閱讀 2210·2019-08-30 10:59
閱讀 1242·2019-08-29 14:04
閱讀 1025·2019-08-29 12:41
閱讀 2029·2019-08-26 12:22
