VUE实现文件下载

第一:请求的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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页