高端模板网站建设,网站规划书包括哪些方面,东莞百度搜索排名优化,那个网站的公众后推广做的好1.window.open
我最初使用的方法就是这个#xff0c;只要提供了文件的服务器地址#xff0c;使用window.open也就是在新窗口打开#xff0c;这时浏览器会自动执行下载。
2.a标签
其实window.open和a标签是一样的#xff0c;只是a标签是要用户点击触发#xff0c;而wind…1.window.open
我最初使用的方法就是这个只要提供了文件的服务器地址使用window.open也就是在新窗口打开这时浏览器会自动执行下载。
2.a标签
其实window.open和a标签是一样的只是a标签是要用户点击触发而window.open可以主动触发
后端如果设置了Content-Disposition 那么不需要download属性也能下载。而且后端还可以设置文件名。 a hrefhttps:xxx.mp4 downloadtest下载文件/a3.xhraxios下载
这个时候请求发送的时候需要注明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): Promiseany {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; filenamereq.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; filenamereq.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 nonea.href urla.download filenamedocument.body.appendChild(a)a.click()document.body.removeChild(a)window.URL.revokeObjectURL(url) // 释放blob对象
}
