Angular2+ 使用 Post 请求下载文件

最新推荐文章于 2023-04-06 16:36:10 发布

转载最新推荐文章于 2023-04-06 16:36:10 发布 · 371 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qimeng/p/9917147.html

文章标签：

#javascript #前端 #json #ViewUI

本文介绍了一种在遇到参数过大的情况下，通过Ajax而非直接使用window.open()进行文件下载的方法。利用POST请求获取文件，并通过创建和触发a标签的点击事件来实现浏览器的下载功能。

一般遇到下载文件的需求，我们使用 window.open(url) 方法传入后台对应接口地址即可打开新窗口触发下载。
但是常常有参数过大等情况我们不得不使用 Ajax 来解决问题，可是 Ajax 并不会触发浏览器的下载，就需要我们曲线救国了。

动态生成一个带下载地址的标签元素 <a>，被动触发点击事件，进而触发浏览器下载行为。

// post请求
getFileDownload(){
    return this.http.post(url, [params], { responseType: 3 })
        .map(res => res.json())
        .catch(this.conf.handleError)
}

// ts中调用
downloadFile(){
    this.download.getFileDownload()
        .subscribe(res => {
            let blob = new Blob([res])
            let objectUrl = URL.createObjectURL(blob);  
            let a = document.createElement('a');
            document.body.appendChild(a);
            a.setAttribute('style', 'display:none');
            a.setAttribute('href', objectUrl);
            a.setAttribute('download', [fileName]);
            a.click();
            URL.revokeObjectURL(objectUrl); 
        })
}

参考：https://www.cnblogs.com/liugang-vip/p/7016733.html

转载于:https://www.cnblogs.com/qimeng/p/9917147.html