Question

我正在将Intranet与文档管理系统集成。 DMS具有SOAP API。我们构建了一个客户端，它接收REST调用，进行SOAP调用，并返回JSON或文档数据。

问题是AJAX filedownload的所有解决方案似乎都使用iFrame（参见John Culniver's filedownload plugin）。

我不能使用它，因为我需要在标头中提供身份验证凭据。我能想到的唯一其他潜在解决方案是使用window.open（如果我可以通过浏览器弹出窗口阻止）。

有没有人有另一个可能的解决方案，或者如何使用window.open？

由于

Answer 1

我认为没有针对此问题的客户端解决方案。 window.open不允许您设置请求标头。您需要执行诸如向服务器发送cookie或其他值之类的操作，并添加服务器端代码以减少对请求标头的需求。

见答案：

Answer 2

我成功地做到了。在我的示例中，我使用的是基本身份验证，但是您可以将 Authorization 标头替换为其他值（例如，可以将其替换为Bearer Yourtokenvalue。

这是代码段

$(document).on("click", "#btn", function() {

  var username = "yourUserNameForBasicAuthentication";
  var password = "yourPasswordForBasicAuthentication"

  console.log("button clicked");
  var request = new XMLHttpRequest();
  request.open("GET", $("#txtUrl").val().trim(), true);

  //Set the authorization headers
  request.setRequestHeader("Authorization", "Basic " + window.btoa(username + ":" + password));

  //Set the Response type as blob which means raw data
  request.responseType = "blob";

  //We will initiate a default file name in case no file name is detected later on from headers of HTTP Request
  var fileName = "unnamed.pdf";
  request.onload = function(event) {
    if (request.status == 200) {
      console.log("success response received");
      var blob = request.response;

      //Getting contenttype from response headers
      var contentType = request.getResponseHeader("content-type");
      if (contentType == null) {
        contentType = "application/pdf";
      }

      //Check 'Content-Disposition' header to get filename of file (if possible)
      if (request.getResponseHeader("Content-Disposition")) {
        var contentDisposition = request.getResponseHeader("Content-Disposition");
        fileName = contentDisposition.substring(contentType.indexOf("=") + 1);
      }

      if (window.navigator.msSaveOrOpenBlob) {
        // Internet Explorer
        window.navigator.msSaveOrOpenBlob(new Blob([blob], {
          type: contentType
        }), fileName);
      } else {
        var el = document.createElement("a");
        document.body.appendChild(el);
        el.href = window.URL.createObjectURL(blob);
        el.download = fileName;
        el.click();
        el.remove();
        window.URL.revokeObjectURL(el.href);
      }


    } //end of Status code
    else {
      alert("System failed to authenticate");
    }

  } //End of event
  request.send();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="https://yoursamplefile.txt" id="txtUrl" style="width:100%" /><br />
<input type='button' value='Download File' id='btn' />

经过身份验证的AJAX文件下载

2 个答案: