二进制文件流的下载 vue+axios

一般的文件下载就是使用链接 直接用a标签将地址写入

<a :href="文件地址" download="文件下载名称">下载</a>

由于各种原因 现在是将二进制文件流返回，以前的下载方式不支持，更新一种新的下载方式，添加了responseType: 'blob'，告诉服务器需要的格式。

    axios({
        method: 'post',
        url: url,
        data: {},
        responseType: 'blob'
    }).then(res => {
        let data = res.data
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', 'test.rar')

        document.body.appendChild(link)
        link.click()
    }).catch((error) => {})

那么blob是什么呢?

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据 详细内容
我们的最终目的就是将文件下载下来，使用blob对象创建一个URL，将地址写到a标签中下载。

image.png