对于F12调用下载接口

前后端分离项目,前端有一个下载按钮,点击下载excel文件,但是用apipost调用无法下载,试过很多方法,也不出现下载按钮,最后用F12的console中实现,粘贴以下代码回车即可:

fetch('http://192.168.1.1:1234/yoururl', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ********************************'
  },
  body: JSON.stringify({
    page: 1,
    size: 10
  })
})
  .then(response => {
    // 直接创建下载链接
    const contentDisposition = response.headers.get('Content-Disposition');
    const filename = contentDisposition 
      ? contentDisposition.split('filename=')[1].replace(/"/g, '') 
      : '基础数据.xlsx';

    return response.blob().then(blob => {
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    });
  })
  .catch(error => console.error('下载失败:', error));
posted @ 2025-06-11 10:21  Charles博客  阅读(48)  评论(0)    收藏  举报