[javascript] JSON 데이터로 POST를 통해 파일을 다운로드하는 JavaScript / jQuery

jquery 기반 단일 페이지 웹 응용 프로그램이 있습니다. AJAX 호출을 통해 RESTful 웹 서비스와 통신합니다.

다음을 달성하려고합니다.

1. JSON 데이터가 포함 된 POST를 REST URL에 제출하십시오.
2. 요청이 JSON 응답을 지정하면 JSON이 리턴됩니다.
3. 요청이 PDF / XLS / etc 응답을 지정하면 다운로드 가능한 바이너리가 반환됩니다.

1 & 2가 작동하고 있으며 클라이언트 jquery 앱은 JSON 데이터를 기반으로 DOM 요소를 만들어 웹 페이지에 반환 된 데이터를 표시합니다. 또한 웹 서비스 관점에서 # 3 작업을하고 있습니다. 즉 올바른 JSON 매개 변수가 제공되면 이진 파일을 만들고 반환합니다. 그러나 클라이언트 자바 스크립트 코드에서 # 3을 처리하는 가장 좋은 방법은 확실하지 않습니다.

이처럼 아약스 호출에서 다운로드 가능한 파일을 다시 가져올 수 있습니까? 브라우저가 파일을 다운로드하고 저장하도록하려면 어떻게합니까?

$.ajax({
    type: "POST",
    url: "/services/test",
    contentType: "application/json",
    data: JSON.stringify({category: 42, sort: 3, type: "pdf"}),
    dataType: "json",
    success: function(json, status){
        if (status != "success") {
            log("Error loading data");
            return;
        }
        log("Data loaded!");
    },
    error: function(result, status, err) {
        log("Error loading data");
        return;
    }
});

서버는 다음 헤더로 응답합니다.

Content-Disposition:attachment; filename=export-1282022272283.pdf
Content-Length:5120
Content-Type:application/pdf
Server:Jetty(6.1.11)

또 다른 아이디어는 PDF를 생성하여 서버에 저장하고 URL을 포함하는 JSON을 파일에 반환하는 것입니다. 그런 다음 ajax 성공 핸들러에서 다른 호출을 실행하여 다음과 같은 작업을 수행하십시오.

success: function(json,status) {
    window.location.href = json.url;
}

그러나 그렇게하면 서버를 두 번 이상 호출해야하며, 서버는 다운로드 가능한 파일을 빌드하고 어딘가에 저장 한 다음 주기적으로 해당 스토리지 영역을 정리해야합니다.

이를 달성하는 더 간단한 방법이 있어야합니다. 아이디어?

편집 : $ .ajax에 대한 문서를 검토 한 후 응답 dataType이 하나만 될 수 있다는 것을 xml, html, script, json, jsonp, text알았습니다. 따라서 2 진 파일을 @VinayC 답변에 제안 된 데이터 URI 체계 (원하는 것이 아닙니다).

그래서 내 옵션은 다음과 같습니다.

1. 아약스를 사용하지 않고 양식 게시물을 제출하고 JSON 데이터를 양식 값에 포함하십시오. 숨겨진 iframe 등을 어지럽 힐 필요가 있습니다.

2. 표준 GET 요청을 작성하고 window.location.href를이 URL로 설정하기 위해 ajax를 사용하지 말고 JSON 데이터를 쿼리 문자열로 변환하십시오. 브라우저가 응용 프로그램 URL에서 변경되지 않도록 클릭 핸들러에서 event.preventDefault ()를 사용해야 할 수도 있습니다.

3. 위의 다른 아이디어를 사용하지만 @naikus 답변의 제안으로 향상되었습니다. 웹 서비스가 이것이 아약스 호출을 통해 호출되고 있음을 알리는 매개 변수와 함께 AJAX 요청을 제출하십시오. 웹 서비스가 ajax 호출에서 호출 된 경우 생성 된 자원에 대한 URL이있는 JSON을 리턴하십시오. 자원이 직접 호출되면 실제 2 진 파일을 리턴하십시오.

내가 생각할수록 마지막 옵션이 더 마음에 듭니다. 이렇게하면 요청에 대한 정보 (생성 시간, 파일 크기, 오류 메시지 등)를 다시 얻을 수 있으며 다운로드를 시작하기 전에 해당 정보에 대해 조치를 취할 수 있습니다. 단점은 서버의 추가 파일 관리입니다.

이것을 달성하는 다른 방법이 있습니까? 내가 알아야 할 이러한 방법의 장단점이 있습니까?

답변

$.post('/create_binary_file.php', postData, function(retData) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute("src", retData.url);
  iframe.setAttribute("style", "display: none");
  document.body.appendChild(iframe);
}); 

$.post('/create_binary_file.php', postData, function(retData) {
  $("body").append("<iframe src='" + retData.url+ "' style='display: none;' ></iframe>");
}); 

$.post(/*...*/,function (result)
{
    var blob=new Blob([result]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.txt";
    link.click();

});

    public JsonResult Validate(int reportId, string format, ReportParamModel[] parameters)
    {
        // TODO: do validation

        if (valid)
        {
            GenerateParams generateParams = new GenerateParams(reportId, format, parameters);

            string data = new EntityBase64Converter<GenerateParams>().ToBase64(generateParams);

            return Json(new { State = "Success", Data = data });
        }

        return Json(new { State = "Error", Data = "Error message" });
    }

    public ActionResult Generate(string data)
    {
        GenerateParams generateParams = new EntityBase64Converter<GenerateParams>().ToEntity(data);

        // TODO: Generate file

        return File(bytes, mimeType);
    }

    function generate(reportId, format, parameters)
    {
        var data = {
            reportId: reportId,
            format: format,
            params: params
        };

        $.ajax(
        {
            url: "/Validate",
            type: 'POST',
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: generateComplete
        });
    }

    function generateComplete(result)
    {
        if (result.State == "Success")
        {
            // this could/should already be set in the HTML
            formGenerate.action = "/Generate";
            formGenerate.target = iframeFile;

            hidData = result.Data;
            formGenerate.submit();
        }
        else
            // TODO: display error messages
    }

var postData = {
    filename:filename,
    filecontent:filecontent
};
var fakeFormHtmlFragment = "<form style='display: none;' method='POST' action='"+SAVEAS_PHP_MODE_URL+"'>";
_.each(postData, function(postValue, postKey){
    var escapedKey = postKey.replace("\\", "\\\\").replace("'", "\'");
    var escapedValue = postValue.replace("\\", "\\\\").replace("'", "\'");
    fakeFormHtmlFragment += "<input type='hidden' name='"+escapedKey+"' value='"+escapedValue+"'>";
});
fakeFormHtmlFragment += "</form>";
$fakeFormDom = $(fakeFormHtmlFragment);
$("body").append($fakeFormDom);
$fakeFormDom.submit();

<?php
/**
 * get HTTP POST variable which is a string ?foo=bar
 * @param string $param
 * @param bool $required
 * @return string
 */
function getHTTPPostString ($param, $required = false) {
    if(!isset($_POST[$param])) {
        if($required) {
            echo "required POST param '$param' missing";
            exit 1;
        } else {
            return "";
        }
    }
    return trim($_POST[$param]);
}

$filename = getHTTPPostString("filename", true);
$filecontent = getHTTPPostString("filecontent", true);

header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename=\"$filename\"");
echo $filecontent;

var apples = new Array();
// construct data - replace with your own
$.ajax({
   type: "POST",
   url: '/Home/Download',
   data: JSON.stringify(apples),
   contentType: "application/json",
   dataType: "text",

   success: function (data) {
      var url = '/Home/Download?id=' + data;
      window.location = url;
   });
});

[HttpPost]
// called first
public ActionResult Download(Apple[] apples)
{
   string json = new JavaScriptSerializer().Serialize(apples);
   string id = Guid.NewGuid().ToString();
   string path = Server.MapPath(string.Format("~/temp/{0}.json", id));
   System.IO.File.WriteAllText(path, json);

   return Content(id);
}

// called next
public ActionResult Download(string id)
{
   string path = Server.MapPath(string.Format("~/temp/{0}.json", id));
   string json = System.IO.File.ReadAllText(path);
   System.IO.File.Delete(path);
   Apple[] apples = new JavaScriptSerializer().Deserialize<Apple[]>(json);

   // work with apples to build your file in memory
   byte[] file = createPdf(apples);

   Response.AddHeader("Content-Disposition", "attachment; filename=juicy.pdf");
   return File(file, "application/pdf");
}

$scope.downloadSearchAsCSV = function(httpOptions) {
  var httpOptions = _.extend({
    method: 'POST',
    url:    '',
    data:   null
  }, httpOptions);
  $http(httpOptions).then(function(response) {
    if( response.status >= 400 ) {
      alert(response.status + " - Server Error \nUnable to download CSV from POST\n" + JSON.stringify(httpOptions.data));
    } else {
      $scope.downloadResponseAsCSVFile(response)
    }
  })
};
/**
 * @source: https://github.com/asafdav/ng-csv/blob/master/src/ng-csv/directives/ng-csv.js
 * @param response
 */
$scope.downloadResponseAsCSVFile = function(response) {
  var charset = "utf-8";
  var filename = "search_results.csv";
  var blob = new Blob([response.data], {
    type: "text/csv;charset="+ charset + ";"
  });

  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename); // @untested
  } else {
    var downloadContainer = angular.element('<div data-tap-disabled="true"><a></a></div>');
    var downloadLink      = angular.element(downloadContainer.children()[0]);
    downloadLink.attr('href', window.URL.createObjectURL(blob));
    downloadLink.attr('download', "search_results.csv");
    downloadLink.attr('target', '_blank');

    $document.find('body').append(downloadContainer);

    $timeout(function() {
      downloadLink[0].click();
      downloadLink.remove();
    }, null);
  }

  //// Gets blocked by Chrome popup-blocker
  //var csv_window = window.open("","","");
  //csv_window.document.write('<meta name="content-type" content="text/csv">');
  //csv_window.document.write('<meta name="content-disposition" content="attachment;  filename=data.csv">  ');
  //csv_window.document.write(response.data);
};