• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

笔记-js异步下载文件

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0703/4952.html 1190000019647234
之前因为懒,异步请求的下载都是直接写在a标签里,请求权限让后端做特殊处理判断,就像这样
<a href="getRequestUrl">点击下载</a>
现在觉得这样处理不太好,一个是后端权限要做单独判断,另一个是如果调用接口报错就没办法处理了,研究之后修改了一下,项目用了axios这个lib,所以是针对axios的request和response做了修改,不过对于原生写法和其他库,原理是一样的

1.将请求的responseType设置为blob

function exportData(p) {
    return axios({
        url: '/data/export',
        method: 'get',
        params: p,
        responseType: 'blob'
    });
}

2.对response进行处理

因为项目里用了response拦截器来处理响应,所以我在拦截器里做了处理,也可以单独处理。

axios.interceptors.response.use(
    response=> {
        // ...
        // Blob类型处理
        let checkType = response.config.responseType;
        if(checkType === "blob" && res.type === 'application/octet-stream') { // 正常下载时直接返回响应数据
            return response.data
        } else if(checkType === "blob" && res.type === 'application/json') { // 请求出错时,接口返回的内容是json,于是将blob中的内容取出
            let reader = new FileReader();
            reader.onload = function(event){
                let content = reader.result; // blob中的内容
                Message({
                    message: JSON.parse(content).desc,
                    type: 'error',
                    duration: 5 * 1000
                })
            };
            reader.readAsText(response.data);
            return Promise.reject('error')
        }
        
        // ...
    },
    error => {
        // ...
    }
)

3.html页面自动开始下载

exportData(para).then(res => {
    let content = res;
    let aTag = document.createElement('a');
    let blob = new Blob([content]);
    aTag.download = 'Datas.xlsx'; // 也可以让后端设置文件名,通过headers返回
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
}).finally(() => {

})
参考博客:https://www.cnblogs.com/coder...

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!