fetch post 下载文件

一.简介

fetch 发送post请求，然后利用 Blob 对象来接收处理，在接收到后端返回的文件后，把其转化一下，放入a标签的href中，并触发下载行为。

二.流程

fetch(url, {
   method: 'POST',
    body: JSON.stringify({
    	name:'vincent',
	}),
    headers: {
      'Content-Type': 'application/json;charset=UTF-8',
    }
  }).then(function(response) {
      let filename = null;
      try{
        filename = response.headers.get('Content-Disposition').split(';')[1].split('=')[1];
        filename = decodeURIComponent(filename);
      }
      catch(e){
        console.log(e);
      }

      response.blob().then(blob => {
          const link = document.createElement('a')
          link.style.display = 'none'
          // a 标签的 download 属性就是下载下来的文件名
          if(filename != null){
            link.download = filename
          }
          
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click()
          // 释放的 URL 对象以及移除 a 标签
          URL.revokeObjectURL(link.href)
          document.body.removeChild(link)
    });
});

response.headers 直接去拿 headers，发现是一个 Headers 的空对象,但是可以通过 Headers 对象的get 方法获取相关的 header

三.测试