方法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;
}
