首页 IT程序员内容详情

VUE实现文件下载

2021-05-13 48462 zp450144284

第一:请求的responseType为blob,以post请求为例:


downloadClick(row){

        let entity = {

          id: row.id,

          filename: row.filename,

        }

        this.$http.post('/v1/FileManage/downloadFile', entity ,{responseType: 'blob'}).then((response)=> {

         this.download(response.body,row)

        });

      },

第二步:请求成功,拿到response里面的数据后,调用download函数(创建a标签,设置download属性,插入到文档中并click)


methods: {

    // 下载文件

    download (data,row) {

        if (!data) {

            return

        }

        let url = window.URL.createObjectURL(new Blob([data]))

        let link = document.createElement('a')

        link.style.display = 'none'

        link.href = url

        // 获取文件名

        // download 属性定义了下载链接的地址而不是跳转路径

        link.setAttribute('download', row.filename)

        document.body.appendChild(link)

        link.click()

    }

}

传送门:后台代码:https://blog.csdn.net/mibi8840/article/details/86742134

————————————————

版权声明:本文为CSDN博主「code chage word」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/mibi8840/article/details/86741982


相关标签: # vue

 暂无评论,快来抢沙发吧~

发布评论