美文网首页让前端飞前端Vue专辑前端
vue按钮点击文件流下载,并在请求头header传递token

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

作者: small_Sun | 来源:发表于2020-04-15 11:09 被阅读0次

    文件以文件流的形式下载,并要求向后端传递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();
    }
    
    

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/etwqvhtx.html