js vue react 文件下载

1. 普通文件下载

const a = document.createElement('a');
a.href = path;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

2. EXCEL 文件流下载

responseType: 'blob' // 表明返回服务器返回的数据类型
// 根据情况是否添加文件名称
// let filename = decodeURIComponent(res.headers.filename);
let result=res.data; 
//如果后端返回的result是进过Blob处理的，直接 window.URL.createObjectURL(result)，如果没有，就需要先实例化new Blod处理之后再window.URL.createObjectURL(blob);

let blob = new Blob([result], {type: "application/vnd.ms-excel"});

let url = window.URL.createObjectURL(blob);
let link = document.createElement('a');
// link.download = filename;
link.href = url;
link.click();

3. ZIP 文件流下载

3.1  arraybuffer

responseType: "arraybuffer",  // 指定文件格式

const a = document.createElement("a");
a.href = (window.URL || window.webkitURL).createObjectURL(
new Blob([res], {
     type: 'application/octet-stream'
     })
);
const fileName = '***.zip'
a.download = decodeURIComponent(fileName);
a.dispatchEvent(new MouseEvent("click"));

3.2  blob

responseType: 'blob', // 指定格式

let blob = new Blob([res], { type: 'application/zip' });
let downloadElement = document.createElement('a');
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = ***.zip
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象