头图
最近在做一个浏览器下载文件的功能,遇到了一个奇怪的问题,“浏览器已经收到了服务器的响应,也能看到不停地接收数据,但就是没有弹出下载提示框”。

一开始猜测是服务端的响应头有问题:

服务端代码

// 文件下载
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没有触发浏览器下载弹框》


来了老弟
508 声望31 粉丝

纸上得来终觉浅,绝知此事要躬行