前端执行下载文件GET POST

前端进行下载文件

前端请求下载文件

GET

针对GET请求下载文件，直接可以采用这种方式下载

  window.location.href =url

POST

准备好参数，即可直接生成

  //导出Excel
    /**
           * XMLHttpRequest请求
      * @param params 请求参数
      */
    request(params: any, url: any) {
        // 创建XMLHttpRequest对象
        const req = new XMLHttpRequest();
        // 初始化
        req.open('POST', url);
        // 设置响应类型为blob
        // req.responseType = 'blob';
        // 设置请求头
        req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        req.setRequestHeader('Access-Control-Allow-Credentials', 'true');
        req.setRequestHeader('Access-Control-Allow-Origin', 'true');
        // 请求成功回调事件
        req.onload = () => {
            // 获取响应数据
            const data = req.response;
            // 创建blob对象并将响应数据添加进去
            const blob = new Blob([data], { type: 'application/vnd.ms-excel' });
            // 将blob对象转成Url
            const blobUrl = window.URL.createObjectURL(blob);
            // 定义下载文件名称
            const download = 'a.xls';
            // 调用下载方法
            this.download(download, blobUrl)
        }
        // 请求出现错误回调事件
        req.onerror = () => {
            console.log('导出失败');
        }
        // 发送请求
        req.send(JSON.stringify(params));
    }

    /**
     * 下载方法
     * @param download 下载名称
     * @param blobUrl 下载地址
     */
    download(download, blobUrl) {
        // 创建a标签
        const a = document.createElement('a')
        // 将a添加到页面中
        document.body.appendChild(a);
        // 将a标签的样式设置为隐藏
        a.style.display = 'none';
        // 设置a标签的下载名称
        a.download = download;
        // 设置a标签的下载地址
        a.href = blobUrl;
        // 触发a标签的点击事件
        a.click();
        // 将a标签从页面中移除
        document.body.removeChild(a);
    }