VUE实现文件下载

原创于 2019-02-01 15:52:30 发布 · 2.4w 阅读

29 ·

CC 4.0 BY-SA版权

Vue+elementUi 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在前端使用Blob对象和a标签的download属性实现文件下载的方法，通过post请求获取文件数据，并利用JavaScript创建下载链接，适用于响应类型为blob的场景。

第一：请求的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.youkuaiyun.com/mibi8840/article/details/86742134