問(wèn)題
文件保存在 OSS脱盲，為了避免文件重名覆蓋，于是上傳文件采用了 UUID 命名（嗯，就是一長(zhǎng)串ABCD那種O_O`）
但是绷跑，下載的時(shí)候：
- 這個(gè)是啥...
- 你上傳的配置文件啊
- 我明明傳的是
xxx.txt，怎么變成F8581FA0D-94D0-4DE4-98B0-F3416AEF0BB9.txt了凡资，什么鬼 - 那個(gè)是 OSS 為了...
- 我不聽(tīng)我不聽(tīng)Ｔ夷蟆！
- 哦...那我改改
坑
網(wǎng)上搜唄隙赁，HTML5 中 a 標(biāo)簽提供了一個(gè) filename 屬性垦藏，可以下載成指定的 download 屬性名稱。嗯伞访，官網(wǎng)原意是這樣的掂骏。
<a href="/images/myw3schoolimage.jpg" download="w3logo">
官網(wǎng) demo 是這樣子的，試了一下厚掷，是 OK 的弟灼，不信你去看看。
但是冒黑，但是呢田绑，這個(gè)搞 OSS 的鏈接不行，設(shè)置 download 無(wú)效...
但是抡爹，這邊還有一個(gè)但是掩驱，騷年，你這個(gè) IE 他不支持啊，不支持啊欧穴，不支持懊癖啤！涮帘！ 親拼苍，快醒醒！天要亮了 = _=
解決方法
上知乎看看调缨，有插件 eligrey/FileSaver.js · GitHub
差不多就是獲取文件 Blob映屋，然后下載重命名，簡(jiǎn)單整理了一下：
/**
* 獲取 blob
* @param {String} url 目標(biāo)文件地址
* @return {Promise}
*/
function getBlob(url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
}
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名稱
*/
function saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement('a');
const 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 目標(biāo)文件地址
* @param {String} filename 想要保存的文件名稱
*/
function download(url, filename) {
getBlob(url).then(blob => {
saveAs(blob, filename);
});
}
來(lái)一發(fā)（看不見(jiàn)同蜻？粘到控制臺(tái)試試）：
download('https://github.com/vuejs/vue-router', 'vue-router.html');
缺陷
缺陷必然會(huì)有棚点，自行取舍吧= =
- 非同源會(huì)有跨域問(wèn)題
可以設(shè)置資源允許跨域，如果可以設(shè)置的話
- 會(huì)預(yù)先加載（下載）文件湾蔓，如果文件比較大瘫析，等待時(shí)間會(huì)比較長(zhǎng)
可以設(shè)置 loading 方式解決，不過(guò)好像也不是很完美
兼容性
ChromeIE10+
示例有
ES6的語(yǔ)法默责，請(qǐng)自行轉(zhuǎn)一下
參考
—— 2017/11/24 By Live桃序， sunny.
