AJAX文件下载使用自定义标题 [英] AJAX File Download with custom header

问题描述

我想送请求提供我的文件下载对话框的URL。在同一时间服务器需要在请求报头的某些参数。所以我想在插入请求自定义标题，并响应获取文件。有什么办法，我们可以做到这一点？

谢谢，
阿米特

解决方案

尝试使用与 A 元素的数据 - * 设置为标题的要求， $。阿贾克斯（）与标题选项设置为 A 元素数据头文件对象。

在 $。阿贾克斯（） 成功设置 A 元素的href 来响应，的Blob 在的ObjectURL ，下载属性 file.name 或临时文件名，调用。点击（） A 元素激活保存文件对话框。

\r

\r

$（文件）。就绪（函数（）{\r
  $（输入[类型=按钮]）。点击（函数（）{\r
    //设置`数据headers`对象\r
    变种埃尔= $（[数据报头]）;\r
    el.data（头）[X-自定义页眉] = $（输入[类型=文本]）[0] .value的\r
      || el.data（头）[X-自定义页眉];\r
    $阿贾克斯（{\r
      网址：URL.createObjectURL（新斑点（[$（文本区域）VAL（）{\r
        类型：text / plain的\r
      }））\r
      键入：GET，\r
      //设置`headers`为`了``元素数据headers`对象\r
      标题：$（[数据报头]）的数据（头文件）。\r
      beforeSend：功能（jqxhr）{\r
        的console.log（this.headers）;\r
        警报（自定义页眉+ JSON.stringify（this.headers））;\r
      }，\r
      成功：功能（数据，textStatus，jqxhr）{\r
        var文件=新的Blob（[数据] {\r
          类型：jqxhr.getResponseHeader（内容类型）\r
        }）;\r
        的console.log（数据，文件）;\r
        $（textarea的，输入[类型=文本]）VAL（）。\r
        $（a）的\r
          .attr（{\r
            的href：URL.createObjectURL（文件），\r
            下载：file.name || 文件 - + $。现在（）\r
          }）。在（点击，函数（）{\r
            $（这）一个.remove（）\r
          }）\r
          获得（0）。点击（）;\r
      }，\r
      错误：功能（jqxhr，textStatus，errorThrown）{\r
        的console.log（textStatus，errorThrown）\r
      }\r
    }）;\r
  }）\r
}）

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/1.11.1/jquery.min.js\">\r
＆LT; / SCRIPT＆GT;\r
＆LT; textarea的最大长度=5占位符=回声＆GT;＆LT; / textarea的＆GT;\r
＆LT; BR＆GT;\r
＆LT;！ - 集'的X定制header`为`INPUT TYPE =文本`价值 - ＆GT;\r
＆LT;输入类型=文本MAXLENGTH =5占位符=设置请求头/＆GT;\r
＆LT; BR /＆GT;\r
＆LT;输入类型=按钮值=下载/＆GT;\r
＆LT;！ - 一套默认的`的X定制header`为123 - ＆GT;\r
＆下;一个数据标题='{×定制报头：123}'＆GT;＆下; / A＆GT;

\r

\r

\r

I want to send request to a URL which provides me file download dialog box. At the same time the server needs certain parameters in request header. So i want to insert a custom header in the request and get a file in response. Is there any way we can achieve this?

Thanks, Amit

解决方案

Try using a element with data-* set to headers for request , $.ajax() with headers option set to a element data-headers object .

At $.ajax() success set a element href to response as Blob within objectURL, download attribute to file.name or temporary file name , call .click() on a element to activate "Save File" dialog .

$(document).ready(function() {
  $("input[type=button]").click(function() {
    // set `data-headers` object
    var el = $("[data-headers]");
    el.data("headers")["x-custom-headers"] = $("input[type=text]")[0].value 
      || el.data("headers")["x-custom-headers"];
    $.ajax({
      url: URL.createObjectURL(new Blob([$("textarea").val()], {
        type: "text/plain"
      })),
      type: "GET",
      // set `headers` to `a` element `data-headers` object
      headers: $("[data-headers]").data("headers"),
      beforeSend: function(jqxhr) {
        console.log(this.headers);
        alert("custom headers" + JSON.stringify(this.headers));
      },
      success: function(data, textStatus, jqxhr) {
        var file = new Blob([data], {
          "type": jqxhr.getResponseHeader("Content-Type")
        });
        console.log(data, file);
        $("textarea, input[type=text]").val("");
        $("a")
          .attr({
            "href": URL.createObjectURL(file),
            "download": file.name || "file-" + $.now()
          }).on("click", function() {
            $(this).remove()
          })
          .get(0).click();
      },
      error: function(jqxhr, textStatus, errorThrown) {
        console.log(textStatus, errorThrown)
      }
    });
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<textarea maxlength="5" placeholder="echo"></textarea>
<br>
<!-- set `x-custom-header` to `input type="text"` value -->
<input type="text" maxlength="5" placeholder="set request header" />
<br />
<input type="button" value="download" />
<!-- set default `x-custom-header` to "123" -->
<a data-headers='{"x-custom-headers":"123"}'></a>

这篇关于AJAX文件下载使用自定义标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！