前端“花式”下載 文件大法 小結
標簽:
JavaScript
数据源:Blob
function saveFileToBlob(blob, tagFileName, fileType) {
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = (tagFileName ? tagFileName : moment(new Date().getTime()).format('YYYYMMDDhhmmss')) + '.' + fileType; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成后,移除元素
window.URL.revokeObjectURL(href);
}数据源:Base64
function saveFileToBase64(urlData, type) {
// 去掉url的头,并转化为byte
var bytes = window.atob(urlData);
// 处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
// 生成视图(直接针对内存):8位无符号整数,长度1个字节
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
var blob = new Blob([ab], {
type: 'application/json'
});
//引用上文下载二进制流的方法
saveFileToBlob(blob, '', type);
}数据源:Link
function saveFileToLink(url, fileName, type, fn) {
var xhr = new XMLHttpRequest();
url = url.includes('https:') ? url.replace('https:', '') : url.replace('http:', '');
xhr.open('get', url, true);
xhr.setRequestHeader('Content-Type', 'application/' + type);
xhr.setRequestHeader("If-Modified-Since", "0");
xhr.responseType = "blob";
xhr.onprogress = function (e) {
//文件下载进度
if (fn && typeof fn == 'function') {
fn(e); //监听文件下载进度;
}
}, xhr.onload = function () {
if (this.status == 200) {
//接受二进制文件流
var blob = this.response;
saveFileToBlob(blob, fileName, type);
}
}, xhr.send();
}點擊查看更多內容
為 TA 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦