1、后台的文件给流,不存在跨域问题。不现实
2、给url 网址,后台解决跨域。百度图片就可以改名下载(不报跨域问题)
在同域或者支持跨域的情况下下载并改名的方式
// 下载文件
downFile(fileInfo) {
const suffix = fileInfo.attachUrl.substring(fileInfo.attachUrl.lastIndexOf('.'))
// 获取带后缀的文件名
const allFileName = fileInfo.attachName + suffix;
this.getBlob(fileInfo.attachUrl).then(blob => {
this.saveAs(blob, allFileName);
});
},
// 使用get方式通过XMLHttpRequest的实例获取文件的blob对象
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();
});
},
saveAs(blob, filename) {
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
console.log('即将下载', filename)
link.click();
}
知识点:
1、ajax只会向同源网址,发出http请求,跨域请求是会报错的
2、XMLHttpRequest.responseType
(1) .表示服务器返回数据的类型
(2) .这个属性是可写的,在open之后,send之前,设置这个值,告诉服务器返回指定类型的数据。如果responseType设为空字符串,就等同于默认值text
(3) .“”表示服务器返回文本数据
(4) .“arraybuffer”表示服务器返回二进制数组
(5) ."blob":表示返回二进制对象。图片文件
(6) ."document"返回一个文档对象
(7) ."json"json对象,浏览器自动对返回数据调用JSON.parse()方法
(8) ."text"字符串
3、window.URL.createObjectURL()和window.URL.revokeObjectURL的详解
URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.
objectURL = URL.createObjectURL(blob || file);
URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.
window.URL.revokeObjectURL(objectURL);
网友评论