【前端】下载文件方法

1.window.open

我最初使用的方法就是这个，只要提供了文件的服务器地址，使用window.open也就是在新窗口打开，这时浏览器会自动执行下载。

2.a标签

其实window.open和a标签是一样的，只是a标签是要用户点击触发，而window.open可以主动触发

后端如果设置了Content-Disposition ，那么不需要download属性也能下载。而且后端还可以设置文件名。

<a href="https:xxx.mp4" download="test">下载文件</a>

3.xhr（axios）下载

这个时候，请求发送的时候需要注明responseType = "blob",如果没有设置的情况下，new Blob的时候需要传入第二个参数。比如new Blob([res], { type: xhr.getResponseHeader("Content-Type") });

只是这时后端就没法通过body报错了。只能通过状态码和响应头来传递信息了。

最后我还是选择用json来传递信息,设置这个responseType: 'blob',以后，返回值会被转为blob，这时我们log可以看到type，是application/json的情况就是报错的情形。然后我们转化一遍json可以拿到报错信息，其实也可以把这个逻辑加到axios拦截器里面

export const DOWNLOAD_ITEM = async (data: FileItem): Promise<any> => {const res: Blob = await request.post(`${PROXY_SUFFIX}/downloadItem`, data, {responseType: 'blob',})// json的情况说明是报错if (res.type !== 'application/json') {downloadFile(res, data.name)} else {const r = await res.text()message.error(JSON.parse(r)?.msg)}
}

这边我后端用的是golang的gin框架

返回文件流调用c.File,文件类型不用传，c.Header("Content-Disposition", "attachment; filename="+req.Name)这个设置可以返回文件名。

func (f *FileListAPI) DownloadItem(c *gin.Context) {var req response.FileInfoerr := c.ShouldBindJSON(&req)if err != nil {response.FailWithMessage(err.Error(), c)return}if req.Path == "" {response.FailWithMessage("路径不能为空", c)return}if req.IsFolder {response.FailWithMessage("路径不能为文件夹", c)return} else {c.Header("Content-Disposition", "attachment; filename="+req.Name)// c.Header("Content-Transfer-Encoding", "binary")// c.Header("Content-Type", "application/octet-stream")c.File(req.Path)}fmt.Println("req", req)}

下面是blob对象下载的逻辑,使用createObjectURL转换为url，然后绑到a链接上，通过点击a链接的方式触发下载。

/*** 使用bolb方式下载* @param res* @param filename* @returns*/
export function downloadFile(res: Blob, filename: string) {const url = window.URL.createObjectURL(new Blob([res]))const a = document.createElement('a')a.style.display = 'none'a.href = urla.download = filenamedocument.body.appendChild(a)a.click()document.body.removeChild(a)window.URL.revokeObjectURL(url) // 释放blob对象
}