方法1：
后端返回一個url前端怎么把文件下載下來
最近做的項目有一個用騰訊云上傳音視頻的功能，在后臺管理里面需要將音視頻下載下來，后端是直接返回騰訊云視頻url地址的，
// 點擊下載文件
downloadFile(file) {
// 音視頻下載
if (file.url.indexOf('http://') >=0 || file.url.indexOf('https://') >= 0) {
let handleUrl = ''
// 本站用的https:// 接口返回的http，這樣可能會跨域導致無法下載，這里手動將字符串的http轉一下
if (location.protocol === 'https:') {
handleUrl = file.url.replace('http://', 'https://')
} else {
handleUrl = file.url
}
const loading = this.$loading({
lock: true,
text: '正在下載中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
var xhr = new XMLHttpRequest()
xhr.open("GET", handleUrl, true)
xhr.responseType = 'blob'
xhr.onload = function(e){
if (e.target.readyState === 4 && e.target.status === 200) {
let blob = this.response
// 轉換一個blob鏈接
let u = window.URL.createObjectURL(new Blob([blob]))
let a = document.createElement('a');
a.download = file.fileName
a.href = u
a.style.display = 'none'
document.body.appendChild(a)
a.click()
a.remove()
loading.close()
}
}
xhr.send()
}
},
原文鏈接：https://blog.csdn.net/Blues_jim/article/details/109285111
方法2
之前用的是a標簽的方式，同源是沒有問題的，但一跨域就不行了，試了其它方法，不是報跨域錯誤，就是在當前頁面打開文件，體驗相當不好。
data = data.replace(/\\/g, '/');
var aLink = document.createElement('a');
aLink.download = data.split('/')[data.split('/').length - 1];
aLink.href = data;
aLink.click();
最終解決方案：
/**
* 獲取頁面文件名
* @param url 文件url
*/
function downloadUrlFile(url) {
url= url.replace(/\\/g, '/');
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
//xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
xhr.onload = () => {
if (xhr.status === 200) {
// 獲取文件blob數據并保存
var fileName = getFileName(url);
saveAs(xhr.response, fileName);
}
};
xhr.send();
}
/**
* URL方式保存文件到本地
* @param data 文件的blob數據
* @param name 文件名
*/
function saveAs(data, name) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
save_link.click();
}
/**
* 根據文件url獲取文件名
* @param url 文件url
*/
function getFileName(url)
{
var num = url.lastIndexOf('/')+1
var fileName = url.substring(num)
//把參數和文件名分割開
fileName = decodeURI(fileName.split("?")[0]);
return fileName;
}
