在Safari中下载文件,然后刷新页面

时间:2019-03-04 09:19:16

标签: javascript html5 download safari

我遇到了JavaScript无法正常运行的问题。一切都能在IE 11,Edge,Chrome和Firefox中正常运行。 Safari是唯一古怪的。

我的用例如下:

  • 应向用户提供要下载的文件
  • 服务器可能需要一段时间才能生成文件
  • 服务器发送带有Content-Disposition标头和适当的mime类型的文件
  • 下载文件后,应将用户重定向到另一个页面
  • 最好不要更改服务器端

我当前的解决方案如下:

<button id="btn1" onClick="send(this, 'testfile');">Download</button>
<script>
  console.log("Loading page");
  var oReq = new XMLHttpRequest();

  oReq.onload = function(oEvent) {
    console.log(this)
    var header = oReq.getResponseHeader('Content-Disposition')
    if(header === null) {
      // do some error handling here...
    } else {
      var startIndex = header.indexOf("filename=") + 10; // Adjust '+ 10' if filename is not the right one.
      var endIndex = header.length - 1; //Check if '- 1' is necessary
      var filename = header.substring(startIndex, endIndex);
      var blob = this.response;
      var blobUrl = window.URL.createObjectURL(new Blob([blob], {type: blob.type}));
      var a = document.createElement("a");
      var currentLoc = window.location
      if(a.download !== undefined){
        // works in Chrome and Firefox
        console.log(blob);
        document.body.appendChild(a);
        a.style = "display: none";
        a.href = blobUrl;
        a.download = filename ;
        a.onclick = function() {
          window.location = currentLoc;
        };
        a.click();
      } else if(navigator.msSaveBlob !== undefined) {
        // Works in IE
        navigator.msSaveBlob(blob, filename);
        window.location = currentLock;
      }
    }
  };

  function send(btn, fil) {
    btn.disabled = true
    oReq.open("GET", "/"+fil, true);
    oReq.responseType = "blob";
    console.log("Clicked button!")
    oReq.send()
  }
</script>

我遇到的第一个问题是Safari根本不下载文件。我通过将页面重定向推迟到下载锚点的onclick事件来解决此问题。但是现在Safari拒绝重定向。 我可以通过在重定向周围添加setTimeout来解决此问题,但是我想了解为什么会发生这种情况并避免使用setTimeout。

超时通常会一直起作用,直到由于某种原因将它们设置得太低,因此不起作用。因此,我尽量避免使用它们。

有人知道为什么Safari会顽固地拒绝处理位置分配,而其他所有浏览器的行为都很好吗?

0 个答案:

没有答案