记录一个前端下载zip文件无法打开的问题

后端接口返回zip包的二进制数据，前端实现下载其实方法很简单，通过下列代码即可实现。

let blob = new Blob([data],{type: 'application/zip'})
let url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.click()
URL.revokeObjectURL(url) // 释放内存

• 说明：上述代码中，data是通过接口获取到的zip文件二进制数据。

但是，下载的文件无法解压，报错如下：

那是什么原因呢？

其实，我们使用blob，那请求中需要指定responseType为blob即可。方法如下：

downloadZip() {
    return request({
        url: request_url,
        headers: { // ... headers },
        method: 'get',
        responseType: "blob"
    })
}

在request中添加上述代码中的responseType: "blob"，就解决了下载的zip文件无法打开的问题。