本文内容参考来源: https://cloud.tencent.com/developer/article/1431700
最近在工作中需要实现一个下载的功能,当时自认为很简单,但是设置了download之后,发现重命名没有生效,因为下载没有通过后台协助,只根据一个地址去实现下载,最后查阅了资料,找到了解决办法
/**
* 获取 blob
* @param {String} url 目标文件地址
* @return {cb}
*/
function getBlob(url,cb) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
cb(xhr.response);
}
};
xhr.send();
}
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名称
*/
function saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement('a');
var body = document.querySelector('body');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
// fix Firefox
link.style.display = 'none';
body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(link.href);
};
}
/**
* 下载
* @param {String} url 目标文件地址
* @param {String} filename 想要保存的文件名称
*/
function download(url, filename) {
getBlob(url, function(blob) {
saveAs(blob, filename);
});
};
原创文章,作者:306829225,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/245679.html