vue前端下载文件的2种方式
以下两种方式下载适用于后端返回了文件的url下载地址var x = new XMLHttpRequest();x.open("GET", url, true);//url为文件的下载地址x.responseType = "blob";//二进制文件// x.withCredentials = true; //如果跨域x.onload = function(e) {
·
以下两种方式下载适用于后端返回了文件的url下载地址
var x = new XMLHttpRequest();
x.open("GET", url, true);//url为文件的下载地址
x.responseType = "blob";//二进制文件
// x.withCredentials = true; //如果跨域
x.onload = function(e) {
var content = x.response;
// var content = x.response;
var blob = new Blob([content]);
if ("download" in document.createElement("a")) {
//表示是谷歌或者火狐浏览器,目前只有这两个浏览器支持download属性
var url = (URL || webkitURL).createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
a.download = fileName;//文件的下载名称
a.click();
window.URL.revokeObjectURL(a.href); // 释放URL 对象
} else {
// IE10+下载
// navigator.msSaveBlob(blob, str);
}
};
x.send();
const downloadRes = async (url) => {//定义的下载方法
var filename = url.substr(url.lastIndexOf("/")+1);//获取下载名称
let response = await fetch(url);//url为传入的下载文件地址链接
let blob = await response.blob();
let objectUrl = window.URL.createObjectURL(blob);//创建一个新的下载链接
let a = document.createElement('a');
a.href = objectUrl;
a.download = filename;
a.click();
a.remove();
}
在上述下载方法中,后台接口报跨域,但是打开后台返回的url链接地址,可以直接下载,可以判断后台应该是允许跨域了的,使用fetch方法解决跨域代码如下,亲测可用
const downloadRes = async (url) => {
var filename = url.substr(url.lastIndexOf("/")+1);
let response = await fetch(url,{mode:'no-cors'});//设置禁止跨域
let blob = await response.blob();
let objectUrl = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = objectUrl;
a.download = filename;
a.click();
a.remove();
}
let urlArrayList = res.data.url
urlArrayList.forEach((item)=>{
downloadRes(item)
})
今天又做了一种下载,后台直接返回的是文件的下载地址,但是使用上述两种方式后,一直在报跨域,然而后台暂没有解决,但是在浏览器中打开后台返回的下载地址,会直接弹出下载页面,让用户下载,因此采用了window.open的方式,代码如下
let urlArrayList =[http://127.0.0.1:8848/jald.xml]
urlArrayList.forEach((ii)=>{
window.open(ii,'_blank')
})
//可以直接打开新页面进行下载,下载后会关闭新页面
更多推荐



所有评论(0)