最近在做一个浏览器下载文件的功能,遇到了一个奇怪的问题,“浏览器已经收到了服务器的响应,也能看到不停地接收数据,但就是没有弹出下载提示框”。
一开始猜测是服务端的响应头有问题:
服务端代码
// 文件下载
app.get('/fm/download', (req, res) => {
const { target } = req.query;
if (target) {
const file_path = connector.decode(target);
const rs = fs.createReadStream(file_path);
res.setHeader(
'Content-Disposition',
`attachment; filename=${file_path.split('/').pop()}`
);
rs.pipe(res);
} else {
res.send({ success: false, msg: '下载路径不合法' });
}
});
服务端使用express框架,以流的形式把文件返回给前端。
后来在 stackoverflow 受到启发,并不是服务端的问题,而是因为前端使用了ajax请求。
如果你使用了类似于 axios 这样的库来请求下载接口,虽然可以接收到数据,但是无法唤起浏览器的下载弹窗。
解决方法
可以使用 window.open(download_url) 打开一个新的浏览器标签页来下载,或者 window.location 指向下载链接。
async DownloadFile() {
window.open(downLoadUrl)
}
这样浏览器就可以正常弹出下载弹框了。
最后希望本文可以帮到你,如果觉得有用,请帮忙点赞收藏,谢谢!❤️❤️
文章首发于 IICOOM的技术博客 《Content-Disposition:attachment没有触发浏览器下载弹框》
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。