js下载文件的几种方式，你学废了吗

项目中总是遇到各种下载文件的需求，记录一下我用的最多的三种方式，有更多方法请一定在评论区和大家分享哦。（友情提示：下面代码格式是react写法）

方式一：点击a标签直接下载。（有个弊端：下载失败的话会跳转）

<a href=url download>a标签下载</a>

方式二：点击按钮创建一个a标签来下载

 <button onClick={this.createLinkFirst}>创建a链接下载</button>

 createLinkFirst=()=> {
        //踩坑：
        //用户点击下载多媒体文件(图片/视频等)，最简单的方式，如果url指向同源资源，是正常的。 
        // 如果url指向第三方资源，download会失效，表现和不使用download时一致——浏览器能打开的文件，浏览器会直接打开，不能打开的文件，会直接下载。浏览器打开的文件，可以手动下载。
        //解决方案一：将文件打包为.zip/.rar等浏览器不能打开的文件下载。
        //解决方案二：通过后端转发，后端请求第三方资源，返回给前端，前端使用file-saver等工具保存文件。
        // 如果url指向的第三方资源配置了CORS，download依然无效，但可以通过xhr请求获取文件，然后下载到本地。

        var a = document.createElement('a')
        a.href = url
        a.download = '企业信息.xlsx'//下载文件名称
        document.body.appendChild(a)
        a.click()
        a.remove()
    }

方式三：通过文件流方式下载

<button onClick={this.createLinkSecond}>文件流请求方式下载</button>

//  get 和 post两种方式
createLinkSecond=()=> {
        let url = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'   //请求的URl
        /**
         * @name: 下载
         * @msg: get请求 header传参
         * @param {type} 参数一般拼在url后面
         * @return: 
         */
        let xhr = new XMLHttpRequest();    //定义http请求对象
        xhr.open("get", url, true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.setRequestHeader("AAA", 'value');  //头部参数 （参数名，值）
        xhr.send();
        xhr.responseType = "blob";  // 返回类型blob
        xhr.onload = function () {
            if (this.status === 200) {
                let blob = this.response;
                let a = document.createElement('a')
                let url = window.URL.createObjectURL(blob)
                 	a.href = url
                    a.download = '文件' + '.zip'; //下载文件名
                    a.click()
                    window.URL.revokeObjectURL(url)
                } else {
                    console.log('失败')
                }
          }

        /**
         * @name: 下载
         * @msg:  post请求  json传参
         * @param {type} 
         * @return: 
         */
        let params={
            a:'aa',
            b:'bb'
        }
        let xhr = new XMLHttpRequest();    //定义http请求对象
        xhr.open("post", url, true);
        xhr.setRequestHeader("Content-type", "application/json"); // json传参
        xhr.setRequestHeader("AAA", 'value');
        xhr.send(JSON.stringify(params));
        xhr.responseType = "blob";  // 返回类型blob
        xhr.onload = function () {
            if (this.status === 200) {
                let blob = this.response;
                let a = document.createElement('a')
                let url = window.URL.createObjectURL(blob)
                a.href = url
                a.download = '文件' + '.zip';  //下载文件名
                a.click()
                window.URL.revokeObjectURL(url)

            } else {
                console.log('失败')
            }
        }
  	}