사용자 지정 헤더를 사용한 AJAX 파일 다운로드

사용자 지정 헤더를 사용한 AJAX 파일 다운로드

파일 다운로드 대화 상자를 제공하는 URL로 요청을 보내고 싶습니다.동시에 서버는 요청 헤더에 특정 매개 변수가 필요합니다.나는 요청에 사용자 정의 헤더를 삽입하고 응답 파일을 받고 싶습니다.우리가 이것을 달성할 수 있는 방법이 있습니까?

사용해 보십시오.a와의 요소.data-*요청을 위해 헤더로 설정,$.ajax()와 함께headers옵션 설정a요소data-headers물건.

에서$.ajax() success세트a요소href라고 대답하는.Blob이내에objectURL,download의 탓으로 돌리다.file.name또는 임시 파일 이름, 호출.click()에a요소 - "파일 저장" 대화 상자를 활성화합니다.

$(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를 호출하여 데이터를 블로브로 다운로드하는 것입니다.그런 다음 클라이언트 측에서 데이터를 저장합니다.

---

jQuery의 ajax/get 메서드가 responseType = blob을 지원하지 않습니다.

이 예제에서는 Blink와 Firefox의 최신 Fetch API를 사용하고 있습니다.또한 FileSaver.js를 사용하여 클라이언트 측에서 생성된 블롭을 저장하고 브라우저 간 문제를 처리합니다.

fetch("/", {headers: {"X-mashape-key": "XXXXXX-4-YYYYYY"}})
    .then( response => {
        // we can get the filename if the
        // response headers contains Content-Disposition
        var cd = response.headers.get("Content-Disposition");
        var name = cd && cd.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];

        response.blob().then( 
            blob => window.saveAs(blob, name || "index.html")
        )
    })

또한 바벨 또는 트레이서를 사용하여 es5로 변환할 수 있는 es6에서 사용할 수 있는 몇 가지 새로운 suger 구문을 사용합니다.

가져오기 폴리필을 포함하지 않고 이전 브라우저를 지원해야 하는 경우 - XHR을 사용하여 이전 방식으로 수행해야 합니다.

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.open("get", "/");
xhr.setRequestHeader("X-mashape-key", "XXXXXX-4-YYYYYY");
xhr.send();
xhr.onload = function(){
    var cd = xhr.getResponseHeader("Content-Disposition")
    var name = cd && cd.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];

    window.saveAs(xhr.response, name || "index.html")
}

당신의 요점을 이해하지 못할 수도 있습니다.

제가 생각하는 것은 다음과 같습니다.

//server xxx.php
//omit some code
echo '<a href="file_path" id="download">file_name</a>';

//browser
ajax({
    url: 'http://xxxx/xxx.php',
    success: function(html){
        //append to dom and TODO other manipulations
        $(dom).append(html);
        $('#download').trigger('click');
        $(dom).remove(html);
    }
})

네, 예전에 가지고 있던 어플을 확인해보니 여기 샘플이 있습니다.적응이 필요하겠지만 아이디어는 여기에 있습니다.이 첫 번째 부분은 다음에 배치된 요청 가로채기 속성의 일부입니다.WebMethod전체 인터셉트는 여러 사례를 관리하기 때문에 상당히 복잡합니다.

int byteSize = 262144;
byte[] data = new byte[byteSize];

if (!String.IsNullOrEmpty(myfileName))
{
    _context.Response.AddHeader("Content-disposition", "attachment; filename=\"" + myfileName+ "\"");
}

_context.Response.ContentType = DefaultContentType;
_context.Response.Cache.SetCacheability(HttpCacheability.Private);
_context.Response.Cache.SetExpires(DateTime.UtcNow.AddHours(1));
_context.Response.Buffer = false;
_context.Response.BufferOutput = false;
_context.Response.AddHeader("Content-length", myStreamSize.ToString());

try
{
    int counter = 0;
    int bytesRead = mystream.Read(data, 0, byteSize);
    while ((long)counter < myStreamSize|| bytesRead > 0)
    {
        counter += bytesRead;
        if (bytesRead < byteSize)
        {
            byte[] outBuf = new byte[bytesRead];
            Array.Copy(data, outBuf, bytesRead);
            _context.Response.BinaryWrite(outBuf);
        }
        else
        {
            _context.Response.BinaryWrite(data);
        }
        bytesRead = mystream.Read(data, 0, byteSize);
    }
}
finally
{
    mystream.Close();
    mystream.Dispose();
}
_context.Response.End();

이것은 클라이언트 측 자바스크립트의 두 번째 부분입니다.우리는 jQuery 대신 ExtJS를 사용했습니다.

downloadFile: function(url, getArgs) {
    if( !this.iframe )
    {
        this.iframe = document.createElement("iframe");
        this.iframe.className = "x-hidden";
        document.body.appendChild(this.iframe);
    }

    var args = Ext.urlEncode(getArgs);
    url = url + (args ? ("?" + args) : "");
    this.iframe.src = url;
}

버튼을 클릭하면 이 함수가 호출되고 이 함수에 웹 메서드의 URL이 지정되며 최종적으로 추가 인수가 전달됩니다.JS 측의 아이디어는 URL을 가져온 다음 사용자에게 다운로드를 요청하는 숨겨진 iFrame을 만드는 것입니다.

도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/13581157/ajax-file-download-with-custom-header