使用iframe下载解决a标签下载白屏问题并自定义下载文件名

最近有一个需求是后端返回文件流, 前端接受下载

起初用的a标签, 发现有白屏问题, 用iframe下载发现后端对文件名的设置有问题, 是一段序列化字符串, 沟通无果后决定自己设置下载名字

百度几次后发现没有关于iframe自定义文件名的文章, 思索一阵后想到了这样的方法, 完美解决白屏与自定义文件名的问题

      const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=UTF-8' });
      const blobUrl = window.URL.createObjectURL(blob);
      //创建iframe与a标签, 将a标签嵌套进iframe
      const iframe = document.createElement("iframe");
      let a = document.createElement("a");
      a.style.display = 'none'
      a.href= blobUrl
      a.target = '_self'
      a.download = '自定义.xls'
      // 
      iframe.append(a)
      a.click()
      // 原来用iframe下载发现无法自定义名字
      // iframe.style.display = "none"; // 防止影响页面
      // iframe.style.height = 0; // 防止影响页面
      // iframe.src = blobUrl
      // document.body.appendChild(iframe); 
      setTimeout(() => {
        iframe.remove();
      }, 0.5 * 60 * 1000);
      window.URL.revokeObjectURL(blobUrl)