Vue—文件下载的实现

Vue实现文件下载

首先要分清楚后端返回的是文件流还是直接触发链接就进行下载。
如果是直接触发链接下载的话，那就很简单了，将返回的url给a标签的url属性既可。

如果是文件流的话，那就需要前端再做一次处理，才能进行下载。

1. 触发下载的接口，要在axios设置responseType = ‘blob’
   这个参考官方文档https://github.com/axios/axios
2. 写一个接受文件流的函数

// 接受后端blob文件流 下载
// blob 文件流 fileName 文件名称
function downFiles(blob, fileName) {
    let link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = fileName
    link.click()
    window.URL.revokeObjectURL(link.href)
}
 

3. 发送请求的回调函数里，也要做一些处理,比如说我要触发xx/down接口

api("down", formData, "post", "blob").then(function(res) {
                let blob = new Blob([res.data], {
                    type: '*'
                })
                let fileName = '交易列表'
                _this.$tool.downFiles(blob, fileName)
                _this.isDown = false
            })