让前端飞前端Vue专辑前端

vue按钮点击文件流下载,并在请求头header传递token

2020-04-15  本文已影响0人  small_Sun

文件以文件流的形式下载,并要求向后端传递token等参数,放在请求头header中,可以通过以下方式下载。
如果是单纯的文件下载没做任何要求可以通过a标签或者window.open直接下载,请参考:https://www.jianshu.com/p/964ff366aa6d

<span class='down' @click='handelDown'>
    <i class='img'></i>
</span>

async handelDown() {
    await this.$axios.get(this.$api._api + `/system/dowmloadDict`, {
        responseType: 'blob',
        headers: {
            token: '',
        }
    }).then(res => {
        this.downloadContent(res, '模板文档.xlsx')
    }).catch(err => {
        this.downloadContent(err, '模板文档.xlsx')
    })
},
downloadContent(value, name) {
    const url = window.URL.createObjectUrl(new Blob[vaule.data]) ;
    const link = document.cerateElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', name);
    link.click();
}

上一篇下一篇

猜你喜欢

热点阅读