a标签下载文件

有两种方法,1:a标签 。2:iframe。不同的是:a标签只能下载单个文件,iframe可以多文件下载。

前提是接口成功返回的是文件流格式。

1.如果你的接口时get请求并且请求头不需要带任何东西,可以直接 href=''写进去直接下载

            const elink = document.createElement('a');
            elink.style.display = 'none';
            elink.href = 'http://xxxxxxxxx'
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);

2.如果接口时post,或者需要携带请求头,那可以用Blob。目前我的局限性就是写Blob,必须前端把文件名写入。必须要有elink.download = fileName这行代码,不然我的直接在浏览器跳转页面了(这个问题暂时还没有解决)

 axios.get('http://xxxxx')
                .then(res => {
                   // res.data 是接口返回的文件流
                    const blob = new Blob([res.data])
                    const fileName = 'xxx'
                    const elink = document.createElement('a')
                    elink.download = fileName 
                    elink.style.display = 'none'
                    elink.href = URL.createObjectURL(blob)
                    document.body.appendChild(elink)
                    elink.click()
                    URL.revokeObjectURL(elink.href) // 释放URL 对象
                    document.body.removeChild(elink)
                })

3.iframe 多文件下载,for循环就ok

 const iframe = document.createElement("iframe");
            iframe.style.display = "none"; // 防止影响页面
            iframe.style.height = 0; // 防止影响页面
            iframe.src = value;
            document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求

你可能感兴趣的:(a标签下载文件)