【预警*** 前端菜鸟***仅作记录使用***不对的地方请多指正】
首先熟悉掌握基础知识
关于XMLHttpRequest
官方文档 XMLHttpRequest - Web API 接口参考 | MDN
已知要下载的文件的路径 ,下载一个图片
function downloadFile() {
const url = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1657471424,2319316184&fm=26&gp=0.jpg';
const req = new XMLHttpRequest(); // [unsent]readyState = 0
// 第三个参数,默认是true, 表示异步请求,可以用onreadystatechange监听状态
req.open('get', url, true); // [opened] readyState = 1
req.responseType = 'blob'; //浏览器进行类型转换
// 还可以这样设置请求头部,
// req.setRequestHeader('content-type', mine type)
// onload事件几乎等于onreadystatechange 【0-4五个状态】&& xhr.readyState===4的情况
// 但是这个麻烦,而且在onerror的时候也会触发
req.onload = () => { // [done] readyState = 4
// 这个stutus是http状态码
if (req.status === 200) {
const a = document.createElement('a');
a.download = '这是我重命名的文件名';
a.href = URL.createObjectURL(req.response);
a.click();
}
};
req.send(); //[send] readyState == 2
}
复制代码到浏览器控制台 运行downloadFile()就可以看效果
注意: 有的时候会报错跨域,可是根本不跨域,这个时候可以看看是不是因为url中含有特殊字符,encodeURIComponent处理一下url即可