Content-Disposition:attachment没有触发浏览器下载弹框

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

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

服务端代码

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