文件下載方法
之前做下載文件遇到了點(diǎn)問題, 就趁此機(jī)會總結(jié)一下前端下載文件的方法:
-
如果是瀏覽器支持的類型, 那么打開的話是一個preview操作, 那么針對瀏覽器不支持預(yù)覽的類型, 如果打開的話就會進(jìn)行下載操作
a. 地址欄直接輸入URL
b. window.location.href = URL
c. window.open(URL) -
使用a標(biāo)簽來下載, 利用a標(biāo)簽的
download屬性, 并且可以自定義下載文件的名稱
也可以直接通過js來創(chuàng)建一個a標(biāo)簽, 然后放入body里, 觸發(fā)其點(diǎn)擊事件來下載, 下載過后remove即可文章來源：http://www.zghlxwxcb.cn/news/detail-445995.html
<a href="/xx/xxx.jpg" download="fileName">
- 通過
XMLHttpRequest下載
缺點(diǎn): 此方法是下載完畢之后才在瀏覽器左下角彈出對應(yīng)的文件信息, 沒有下載的進(jìn)度, 如果文件比較大的話, 就會感覺點(diǎn)擊了只是在loading但是并不能確定文件是否在下載, 也無法知道文件的下載進(jìn)度, 體驗(yàn)感不好
// 接收url fileName, 以及文件下載成功之后的回調(diào)
downLoadFile(url, fileName, callback) {
const url2 = url; // url.replace(/\\/g, "/");
const xhr = new XMLHttpRequest();
xhr.open("GET", url2, true);
xhr.responseType = "blob";
//xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
// 為了避免大文件影響用戶體驗(yàn)，建議加loading
xhr.onload = () => {
if (xhr.status === 200) {
// 獲取文件blob數(shù)據(jù)并保存
// const suffix = this.getFileSuffix.call(this, url, fileName);
// this.saveAs.call(this, xhr.response, fileName)
this.saveAs.call(this, xhr.response, fileName)
}
// 下載成功之后執(zhí)行回調(diào)
callback && callback();
};
xhr.send();
},
- 通過OSS實(shí)現(xiàn)有進(jìn)度條的下載方法
優(yōu)點(diǎn): 點(diǎn)擊下載之后直接在瀏覽器左下角彈出對應(yīng)的文件信息以及下載的進(jìn)度, 體驗(yàn)感比較好
// 下載操作
downloadAction(row, type = '') {
// 獲取上傳參數(shù)
getDownloadParam().then(data => {
// 拿到參數(shù)之后去創(chuàng)建 OSS 客戶端對象
this.createOssClient(data).then(client => {
const filename = row.name;
const response = {
'content-disposition': `attachment; filename=${encodeURIComponent(filename)}`
};
const url = client.signatureUrl(row.file_path, { response });
window.location.href = url;
});
}).catch(err => { })
},
// 創(chuàng)建 OSS 客戶端對象
createOssClient(data) {
return new Promise((resolve) => {
const client = new OSS({
region: data.region,
accessKeyId: data.access_key_id,
accessKeySecret: data.access_key_secret,
stsToken: data.security_token,
bucket: data.bucket,
});
resolve(client)
})
},
歡迎大家一起討論學(xué)習(xí)??~文章來源地址http://www.zghlxwxcb.cn/news/detail-445995.html
到了這里，關(guān)于【前端文件下載】直接下載和在瀏覽器顯示下載進(jìn)度的下載方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
