此方法主要用於我們將某些信息,下載成固定的文件格式,如word或記事本等等,
核心的方法有兩個一個是Blob構造函數,一個是window.URL.createObjectURL()。
對於
Blob官方解釋如下
語法
MIME的類別表
https://www.w3school.com.cn/media/media_mimeref.asp
var aBlob = new Blob( array, options );
參數Array:是一個由ArrayBuffer
ArrayBufferView
Blob
Blob 對象表示一個不可變、原始數據的類文件對象。DOMString
等對象構成的 Array
,或者其他類似對象的混合體,它將會被放進 Blob
。DOMStrings會被編碼為UTF-8。
參數options:
1、type 用來表示文件類型,例如 'text/json' 代表一個JSON文件,'text/html'代表一個HTML文件。
2、endings 默認值為"transparent",用於指定包含行結束符\n的字符串如何被寫入。 它是以下兩個值中的一個: "native",表示行結束符會被更改為適合宿主操作系統文件系統的換行符; "transparent",表示會保持blob中保存的結束符不變。
URL.createObjectURL()
靜態方法會創建一個 DOMString,其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。
Vue.prototype.shandlerLocationDown = (_url, title, lastName = '.txt', typeMethod = 'get', params = {}) => { axios({ 文件的后綴名,根據不同文件更換 method: 'get', url: _url, responseType: 'blob', data: params, }).then((res) => { const data = res.data; if (!data) { return; } let blob = new Blob([data], { // type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8', // 'Content-type': 'application/octet-stream',
type:'text/plain'
不同文件的MIME類型進行更換
}); let url = window.URL.createObjectURL(blob); let fileName = lastName != null ? title + lastName : title; if ('download' in document.createElement('a')) {//通過 使用a標簽的download方法下載文件 const a = document.createElement('a'); a.href = url; a.download = fileName; a.style.display = 'none'; document.body.appendChild(a); a.click(); URL.revokeObjectURL(a.href); URL.revokeObjectURL() 靜態方法用來釋放一個之前通過調用 URL.createObjectURL() 創建的已經存在的 URL 對象。當你結束使用某個 URL 對象時,應該通過調用這個方法來讓瀏覽器知道不再需要保持這個文件的引用了。
document.body.removeChild(a); } else { navigator.msSaveBlob(blob, fileName);
Internet Explorer 10 的 msSaveBlob 和 msSaveOrOpenBlob 方法允許用戶在客戶端上保存文件,方法如同從 Internet 下載文件,這是此類文件保存到“下載”文件夾的原因
} }); };