【菜鸟前端开发】下载一个文件（1）用XMLHttpRequest请求下载文件，要求不跨域

【预警*** 前端菜鸟***仅作记录使用***不对的地方请多指正】

 

首先熟悉掌握基础知识

关于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即可